参考文档:http://www.angularjs.cn/A0a6
1、Angular什么时候不会自动为我们$apply
2、这是Angular新手共同的痛处。为什么我的jQuery不会更新我绑定的东西呢?因为jQuery没有调用$apply
,事件没有进入angular context
,$digest
循环永远没有执行。
我们来看一个有趣的例子:
假设我们有下面这个directive和controller
app.js
app.directive('clickable', function() { return { restrict: "E", scope: { foo: '=', bar: '=' }, template: '<ul style="background-color: lightblue"><li>{{foo}}</li><li>{{bar}}</li></ul>', link: function(scope, element, attrs) { element.bind('click', function() { scope.foo++; scope.bar++; }); } } }); app.controller('MainCtrl', function($scope) { $scope.foo = 0; $scope.bar = 0; });
3、它将foo
和bar
从controller里绑定到一个list里面,每次点击这个元素的时候,foo
和bar
都会自增1。
那我们点击元素的时候会发生什么呢?我们能看到更新吗?答案是否定的。因为点击事件是一个没有封装到$apply
里面的常见的事件,这意味着我们会失去我们的计数吗?不会
真正的结果是:$scope
确实改变了,但是没有强制$digest
循环,监视foo
和bar
的$watch
没有执行。也就是说如果我们自己执行一次$apply
那么这些$watch
就会看见这些变化,然后根据需要更新DOM。
试试看吧:http://jsbin.com/opimat/2/
如果我们点击这个directive(蓝色区域),我们看不到任何变化,但是我们点击按钮时,点击数就更新了。如刚才说的,在这个directive上点击时我们不会触发$digest
循环,但是当按钮被点击时,ng-click会调用$apply
,然后就会执行$digest
循环,于是所有的$watch
都会被检查,当然就包括我们的foo
和bar
的$watch
了。
现在你在想那并不是你想要的,你想要的是点击蓝色区域的时候就更新点击数。很简单,执行一下$apply
就可以了:
4、
element.bind('click', function() { scope.foo++; scope.bar++; scope.$apply(); });
5、
相关推荐
主要介绍了AngularJS双向数据绑定原理之$watch、$apply和$digest的应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Digest-Perl-MD5
Angular用户都想知道数据绑定是怎么实现的。你可能会看到各种各样的词汇:$watch,$apply,$digest它们是如何工作的呢?这里我想回答这些问题,其实它们在官方的文档里都已经回答了,但是我还是想把它们结合在一起来讲
主要介绍了angularjs 中$apply,$digest,$watch详解的相关资料,需要的朋友可以参考下
赠送jar包:t-digest-3.2.jar; 赠送原API文档:t-digest-3.2-javadoc.jar; 赠送源代码:t-digest-3.2-sources.jar; 赠送Maven依赖信息文件:t-digest-3.2.pom; 包含翻译后的API文档:t-digest-3.2-javadoc-API...
赠送jar包:t-digest-3.0.jar; 赠送原API文档:t-digest-3.0-javadoc.jar; 赠送源代码:t-digest-3.0-sources.jar; 赠送Maven依赖信息文件:t-digest-3.0.pom; 包含翻译后的API文档:t-digest-3.0-javadoc-API...
Digest-HMAC-1.03.tar.gz
官方离线安装包,亲测可用。使用rpm -ivh [rpm完整包名] 进行安装
赠送jar包:t-digest-3.2.jar; 赠送原API文档:t-digest-3.2-javadoc.jar; 赠送源代码:t-digest-3.2-sources.jar; 赠送Maven依赖信息文件:t-digest-3.2.pom; 包含翻译后的API文档:t-digest-3.2-javadoc-API...
赠送jar包:t-digest-3.0.jar; 赠送原API文档:t-digest-3.0-javadoc.jar; 赠送源代码:t-digest-3.0-sources.jar; 赠送Maven依赖信息文件:t-digest-3.0.pom; 包含翻译后的API文档:t-digest-3.0-javadoc-API...
perl-Digest-SHA1-2.12-2.el6.x86_64.rpm perl-Digest-SHA1-2.12-2.el6.x86_64.rpm
离线安装包,亲测可用
Laravel开发-digest-auth 内腔的摘要式身份验证RFC 2617
AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函数,学习AngularJS必须理解这几个函数。 在绑定$scope中的变量到view的时候,AngularJS自动在内部创建一个”Watch”。”Watch”用于监听...
离线安装包,亲测可用
离线安装包,亲测可用