angularjs使用include后双向绑定失败的解决

haoningabc

浏览: 1482786 次
性别:
来自: 北京

最近访客更多访客>>

zfyq124

bartontang

dlzdy

cnnlush0605

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
angularjs

angularjs JavaScript

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="utf-8">
    <title>ng-model directive</title>
</head>
<body ng-controller="HelloController">
<script src="angular.min.js"></script>
<script>
	var app=angular.module("myapp",[]);
    app.controller("HelloController",function($rootScope,$scope) {
    	$scope.greeting="haoning";
    
        $scope.consoleng = function() {
            console.log($scope.greeting) ;
        }
        
    });
</script>

<div>
    <p>bbbbbbbbb</p>
    <input id="thism" ng-model="greeting" >
    <p>Hello {{greeting || "World"}}</p>
    <button ng-click="consoleng()" >dayin</button>
    <button ng-click="cha()">cha</button>
    <hr>
</div>
</body>
</html>

$scope.greeting与ng-model="greeting"
绑定，党model变了，打印的scope的greeting也变了

然而如果引入了ng-include 的子页面
在子页面改了model之后，scope中的数据没有如期改变

需要处罚apply方法使数据改变，apply又存在安全问题，
解决办法如下

外层的为
out.html

<!DOCTYPE html>
<html ng-app="myapp">
<head>

    <meta charset="utf-8">
    <title>ng-model directive</title>
</head>
<body ng-controller="HelloController">

 
<script src="angular.min.js"></script>
<script>
	var app=angular.module("myapp",[]);
    app.controller("HelloController",function($rootScope,$scope) {
    	$scope.safeApply = function(fn) {
		    var phase = this.$root.$$phase;
		    if (phase == '$apply' || phase == '$digest') {
		        if (fn && (typeof(fn) === 'function')) {
		            fn();
		        }
		    } else {
		        this.$apply(fn);
		    }
		};
    	$scope.greeting="haoning";
    
        $scope.consoleng = function() {
            console.log($scope.greeting) ;
        }
        $rootScope.cha = function() {
        	console.log("cha");
           	$scope.safeApply(function () {  
           		$scope.greeting = document.getElementById("thism").value;  
        	});
        }
    });
</script>

<div ng-include="'inner.html'" 
            class="sidebar sidebar-right"></div>
</body>
</html>

内层的为
inner.html

<div>
    <p>bbbbbbbbb</p>
    <input id="thism" ng-model="greeting" >
    <p>Hello {{greeting || "World"}}</p>
    <button ng-click="consoleng()" >dayin</button>
    <button ng-click="cha()">cha</button>
    <hr>
</div>

使model的值改变后，手动触发一下apple那个方法，
才能改变scope中的值
分析，
加了

	$scope.safeApply = function(fn) {
		    var phase = this.$root.$$phase;
		    if (phase == '$apply' || phase == '$digest') {
		        if (fn && (typeof(fn) === 'function')) {
		            fn();
		        }
		    } else {
		        this.$apply(fn);
		    }
		};

和

$rootScope.cha = function() {
        	console.log("cha");
           	$scope.safeApply(function () {  
           		$scope.greeting = document.getElementById("thism").value;  
        	});
        }

分享到：

websocket传传图片 | 编译linux2.6.24

2015-12-20 19:41
浏览 1871
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

果壳处理器研究小组(Topic基于RISCV64果核处理器的卷积神经网络加速器研究)详细文档+全部资料+优秀项目+源码.zip: 【资源说明】果壳处理器研究小组(Topic基于RISCV64果核处理器的卷积神经网络加速器研究)详细文档+全部资料+优秀项目+源码.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。欢迎下载，沟通交流，互相学习，共同进步！

JSP学生学籍管理系统（源代码+论文+开题报告+外文翻译+答辩PPT）(2024x5).7z: 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；

LabVIEW实现NB-IoT通信【LabVIEW物联网实战】: 资源说明：https://blog.csdn.net/m0_38106923/article/details/144637354 一分价钱一分货，项目代码可顺利编译运行~

【java毕业设计】智慧社区综合平台（源代码+论文+PPT模板）.zip: 有java环境就可以运行起来 ,zip里包含源码+论文+PPT, 系统设计与功能：文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。会员上传下载管理模块：审核与删除会员上传的文件。留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。环境说明：开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7及以上数据库工具：Navicat11及以上开发软件：eclipse/idea Maven包：Maven3.3及以上

基于python3+selenium+unittest的WebUI自动化测试框架，使用POM(页面对象模型)设计模式，适合几乎所有web项目，资料齐全+详细文档: 【资源说明】基于python3+selenium+unittest的WebUI自动化测试框架，使用POM(页面对象模型)设计模式，适合几乎所有web项目，可集成Jenkins部署自动化测试资料齐全+详细文档+高分项目+源码.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。欢迎下载，沟通交流，互相学习，共同进步！

智能车开发案例，使用Python语言在一个文件中实现这里我们将添加一些额外的功能，如自动驾驶模式、避障、超声波传感器读取以及通过TCP/IP网络远程控制: 智能车开发案例，使用Python语言在一个文件中实现。这里我们将添加一些额外的功能，如自动驾驶模式、避障、超声波传感器读取以及通过TCP/IP网络远程控制。首先，确保你已经安装了pyserial、socket库： pip install pyserial

屏幕截图 2024-12-21 165859.png: 屏幕截图 2024-12-21 165859

电缆、树木检测15-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar: 电缆、树木检测15-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rarPL + VG-V4 2024-01-04 6:04 PM ============================= *与您的团队在计算机视觉项目上合作 *收集和组织图像 *了解和搜索非结构化图像数据 *注释，创建数据集 *导出，训练和部署计算机视觉模型 *使用主动学习随着时间的推移改善数据集对于最先进的计算机视觉培训笔记本，您可以与此数据集一起使用该数据集包括5082张图像。 Powerlines-Tree以可可格式注释。将以下预处理应用于每个图像： *调整大小为640x640（拉伸）应用以下扩展用于创建每个源图像的2个版本： *水平翻转的50％概率 *垂直翻转的50％概率 *以下90度旋转之一的同等概率：无，顺时针，逆时针方向

【湍流】基于matlab RANS湍流通道流【含Matlab源码 9913期】.zip: Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容主函数：main.m；调用函数：其他m文件；无需运行运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤步骤一：将所有文件放到Matlab的当前文件夹中；步骤二：双击打开main.m文件；步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

基于python的代码会生成一个简单的圣诞树图形: 圣诞树代码这段代码会生成一个简单的圣诞树图形，包括：三层树冠，使用不同深度的绿色。一个棕色的树干。一颗黄色的星星作为树顶。随机分布的彩色小圆点作为装饰。请确保你已经安装了matplotlib库，如果没有，可以通过pip install matplotlib来安装。运行这段代码后，你应该能看到一个圣诞树的图形。

jsp网上超市设计与实现(源代码+论文)(2024cq).7z: 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；

基于 Node.js、MongoDB、Redis 开发的系统小商城后台全部资料+详细文档+源码+高分项目.zip: 【资源说明】基于 Node.js、MongoDB、Redis 开发的系统小商城后台全部资料+详细文档+源码+高分项目.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。欢迎下载，沟通交流，互相学习，共同进步！

【java毕业设计】智慧社区停车管理系统（源代码+论文+PPT模板）.zip: zip里包含源码+论文+PPT,有java环境就可以运行起来 ,功能说明：文档开篇阐述了随着计算机技术、通信技术和网络技术的快速发展，智慧社区门户网站的建设成为了可能，并被视为21世纪信息产业的主要发展方向之一强调了网络信息管理技术、数字化处理技术和数字式信息资源建设在国际竞争中的重要性。指出了智慧社区门户网站系统的编程语言为Java，数据库为MYSQL，并实现了新闻资讯、社区共享、在线影院等功能。系统设计与功能：文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。会员上传下载管理模块：审核与删除会员上传的文件。留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。

ECharts散点图-日历图.zip: ECharts散点图-日历图

【java毕业设计】智慧社区智慧站点（源代码+论文+PPT模板）.zip: 有java环境就可以运行起来 ,zip里包含源码+论文+PPT, 系统设计与功能：文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。会员上传下载管理模块：审核与删除会员上传的文件。留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。环境说明：开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7及以上数据库工具：Navicat11及以上开发软件：eclipse/idea Maven包：Maven3.3及以上

四川采矿场消防管理规定.docx: 四川采矿场消防管理规定

【java毕业设计】智慧社区智能家居门户.zip: 有java环境就可以运行起来 ,zip里包含源码+论文+PPT, 系统设计与功能：文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。会员上传下载管理模块：审核与删除会员上传的文件。留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。环境说明：开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7及以上数据库工具：Navicat11及以上开发软件：eclipse/idea Maven包：Maven3.3及以上

荒地、水体、农田、湖检测14-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar: 荒地、水体、农田、湖检测14-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rarTAAL-TERRAIN-V6 2022-12-03下午5:58 ============================= *与您的团队在计算机视觉项目上合作 *收集和组织图像 *了解非结构化图像数据 *注释，创建数据集 *导出，训练和部署计算机视觉模型 *使用主动学习随着时间的推移改善数据集它包括4115张图像。地形以可可格式注释。将以下预处理应用于每个图像： *像素数据的自动取向（带有Exif-Arientation剥离） *调整大小为640x640（拉伸）应用以下扩展来创建每个源图像的3个版本： *水平翻转的50％概率 *垂直翻转的50％概率 *以下90度旋转之一的同等概率：无，顺时针，逆时针，颠倒

python hhhhhhhh: python hhhhhhhh

基于selenium的boss直聘自动打招呼工具资料齐全+详细文档+高分项目+源码.zip: 【资源说明】基于selenium的boss直聘自动打招呼工具资料齐全+详细文档+高分项目+源码.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。欢迎下载，沟通交流，互相学习，共同进步！

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

angularjs使用include后双向绑定失败的解决

评论

发表评论

相关推荐

indexedDB存图片减少请求

vizceral-example的例子

jsonpath的helloworld

流动图神器vizceral

emscripten asm.js的helloworld

websocket上传文件

webpack的helloworld

iphone6等移动端的css自适应

javascript自定义事件

html5的fiesystem api 浏览器本地存储

angular指令菜单的例子

websocket传传图片

html5 陀螺仪

webgl的贝塞尔曲线

chrome app的helloworld

shader and Program编程基本概念 - 转

javascript对象转json

jquery 的svg中国地图

纯css的树型结构

D3 的3d图

最近访客更多访客>>