文档章节

理解Angular中的$apply()以及$digest()

郑二
 郑二
发布于 2015/01/26 15:05
字数 2163
阅读 42
收藏 3

英语原文地址

http://www.sitepoint.com/understanding-angulars-apply-digest/

中文原文地址

http://blog.csdn.net/dm_vincent/article/details/38705099

感谢原作者和dm_vincent的翻译,我只是转载记录。


$apply()$digest()AngularJS中是两个核心概念,但是有时候它们又让人困惑。而为了了解AngularJS的工作方式,首先需要了解$apply()$digest()是如何工作的。这篇文章旨在解释$apply()$digest()是什么,以及在日常的编码中如何应用它们。

 

探索$apply()$digest()

AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding),这个特性大大简化了我们的代码编写方式。数据绑定意味着当View中有任何数据发生了变化,那么这个变化也会自动地反馈到scope的数据上,也即意味着scope模型会自动地更新。类似地,当scope模型发生变化时,view中的数据也会更新到最新的值。那么AngularJS是如何做到这一点的呢?当你写下表达式如{{ aModel }}时,AngularJS在幕后会为你在scope模型上设置一个watcher,它用来在数据发生变化的时候更新view。这里的watcher和你会在AngularJS中设置的watcher是一样的:

 

[javascript] view plaincopyprint?

  1. $scope.$watch('aModel'function(newValue, oldValue) {  

  2.   //update the DOM with newValue  

  3. });  

 

传入到$watch()中的第二个参数是一个回调函数,该函数在aModel的值发生变化的时候会被调用。当aModel发生变化的时候,这个回调函数会被调用来更新view这一点不难理解,但是,还存在一个很重要的问题!AngularJS是如何知道什么时候要调用这个回调函数呢?换句话说,AngularJS是如何知晓aModel发生了变化,才调用了对应的回调函数呢?它会周期性的运行一个函数来检查scope模型中的数据是否发生了变化吗?好吧,这就是$digest循环的用武之地了。

 

$digest循环中,watchers会被触发。当一个watcher被触发时,AngularJS会检测scope模型,如何它发生了变化那么关联到该watcher的回调函数就会被调用。那么,下一个问题就是$digest循环是在什么时候以各种方式开始的?

 

在调用了$scope.$digest()后,$digest循环就开始了。假设你在一个ng-click指令对应的handler函数中更改了scope中的一条数据,此时AngularJS会自动地通过调用$digest()来触发一轮$digest循环。当$digest循环开始后,它会触发每个watcher。这些watchers会检查scope中的当前model值是否和上一次计算得到的model值不同。如果不同,那么对应的回调函数会被执行。调用该函数的结果,就是view中的表达式内容(译注:诸如{{ aModel }})会被更新。除了ng-click指令,还有一些其它的built-in指令以及服务来让你更改models(比如ng-model$timeout)和自动触发一次$digest循环。

 

目前为止还不错!但是,有一个小问题。在上面的例子中,AngularJS并不直接调用$digest(),而是调用$scope.$apply(),后者会调用$rootScope.$digest()。因此,一轮$digest循环在$rootScope开始,随后会访问到所有的children scope中的watchers

 

现在,假设你将ng-click指令关联到了一个button上,并传入了一个function名到ng-click上。当该button被点击时,AngularJS会将此function包装到一个wrapping function中,然后传入到$scope.$apply()。因此,你的function会正常被执行,修改models(如果需要的话),此时一轮$digest循环也会被触发,用来确保view也会被更新。

 

Note: $scope.$apply()会自动地调用$rootScope.$digest()$apply()方法有两种形式。第一种会接受一个function作为参数,执行该function并且触发一轮$digest循环。第二种会不接受任何参数,只是触发一轮$digest循环。我们马上会看到为什么第一种形式更好。

 

什么时候手动调用$apply()方法?

如果AngularJS总是将我们的代码wrap到一个function中并传入$apply(),以此来开始一轮$digest循环,那么什么时候才需要我们手动地调用$apply()方法呢?实际上,AngularJS对此有着非常明确的要求,就是它只负责对发生于AngularJS上下文环境中的变更会做出自动地响应(即,在$apply()方法中发生的对于models的更改)AngularJSbuilt-in指令就是这样做的,所以任何的model变更都会被反映到view中。但是,如果你在AngularJS上下文之外的任何地方修改了model,那么你就需要通过手动调用$apply()来通知AngularJS。这就像告诉AngularJS,你修改了一些models,希望AngularJS帮你触发watchers来做出正确的响应。

 

比如,如果你使用了JavaScript中的setTimeout()来更新一个scope model,那么AngularJS就没有办法知道你更改了什么。这种情况下,调用$apply()就是你的责任了,通过调用它来触发一轮$digest循环。类似地,如果你有一个指令用来设置一个DOM事件listener并且在该listener中修改了一些models,那么你也需要通过手动调用$apply()来确保变更会被正确的反映到view中。

 

让我们来看一个例子。加入你有一个页面,一旦该页面加载完毕了,你希望在两秒钟之后显示一条信息。你的实现可能是下面这个样子的:

 

HTML:

[html] view plaincopyprint?

  1. <body ng-app="myApp">  

  2.   <div ng-controller="MessageController">  

  3.     Delayed Message: {{message}}  

  4.   </div>    

  5. </body>  


JavaScript:
[javascript] view plaincopyprint?

  1. /* What happens without an $apply() */  

  2.       

  3.     angular.module('myApp',[]).controller('MessageController'function($scope) {  

  4.       

  5.       $scope.getMessage = function() {  

  6.         setTimeout(function() {  

  7.           $scope.message = 'Fetched after 3 seconds';  

  8.           console.log('message:'+$scope.message);  

  9.         }, 2000);  

  10.       }  

  11.         

  12.       $scope.getMessage();  

  13.       

  14.     });  

 

通过运行这个例子,你会看到过了两秒钟之后,控制台确实会显示出已经更新的model,然而,view并没有更新。原因也许你已经知道了,就是我们忘了调用$apply()方法。因此,我们需要修改getMessage(),如下所示:

 

[javascript] view plaincopyprint?

  1. /* What happens with $apply */   

  2. angular.module('myApp',[]).controller('MessageController'function($scope) {  

  3.       

  4.       $scope.getMessage = function() {  

  5.         setTimeout(function() {  

  6.           $scope.$apply(function() {  

  7.             //wrapped this within $apply  

  8.             $scope.message = 'Fetched after 3 seconds';   

  9.             console.log('message:' + $scope.message);  

  10.           });  

  11.         }, 2000);  

  12.       }  

  13.         

  14.       $scope.getMessage();  

  15.       

  16.     });  

 

如果你运行了上面的例子,你会看到view在两秒钟之后也会更新。唯一的变化是我们的代码现在被wrapped到了$scope.$apply()中,它会自动触发$rootScope.$digest(),从而让watchers被触发用以更新view

 

Note:顺便提一下,你应该使用$timeout service来代替setTimeout(),因为前者会帮你调用$apply(),让你不需要手动地调用它。

 

而且,注意在以上的代码中你也可以在修改了model之后手动调用没有参数的$apply(),就像下面这样:

 

[javascript] view plaincopyprint?

  1. $scope.getMessage = function() {  

  2.   setTimeout(function() {  

  3.     $scope.message = 'Fetched after two seconds';  

  4.     console.log('message:' + $scope.message);  

  5.     $scope.$apply(); //this triggers a $digest  

  6.   }, 2000);  

  7. };  

 

以上的代码使用了$apply()的第二种形式,也就是没有参数的形式。需要记住的是你总是应该使用接受一个function作为参数的$apply()方法。这是因为当你传入一个function$apply()中的时候,这个function会被包装到一个trycatch块中,所以一旦有异常发生,该异常会被$exceptionHandler service处理。

 

$digest循环会运行多少次?

当一个$digest循环运行时,watchers会被执行来检查scope中的models是否发生了变化。如果发生了变化,那么相应的listener函数就会被执行。这涉及到一个重要的问题。如果listener函数本身会修改一个scope model呢?AngularJS会怎么处理这种情况?

 

答案是$digest循环不会只运行一次。在当前的一次循环结束后,它会再执行一次循环用来检查是否有models发生了变化。这就是脏检查(Dirty Checking),它用来处理在listener函数被执行时可能引起的model变化。因此,$digest循环会持续运行直到model不再发生变化,或者$digest循环的次数达到了10次。因此,尽可能地不要在listener函数中修改model

 

Note: $digest循环最少也会运行两次,即使在listener函数中并没有改变任何model。正如上面讨论的那样,它会多运行一次来确保models没有变化。

 

结语

我希望这篇文章解释清楚了$apply$digest。需要记住的最重要的是AngularJS是否能检测到你对于model的修改。如果它不能检测到,那么你就需要手动地调用$apply()




本文转载自:http://blog.csdn.net/dm_vincent/article/details/38705099

上一篇: angular directive
下一篇: angular 表单验证
郑二
粉丝 0
博文 18
码字总数 4318
作品 0
朝阳
程序员
私信 提问
angularjs双向绑定后,发生了什么事情?是什么可以让view层和controller层进行绑定的?

大家好,我是IT修真院北京总院第24期的学员,一枚正直纯洁善良的web程序员 今天给大家分享一下,修真院官网js任务7,深度思考中的知识点——angularjs双向绑定后,发生了什么事情?是什么可以...

我是一只北极熊啊
2017/10/16
0
0
再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608
2018/04/19
0
0
Angularjs的$apply及其优化使用

今天,我们要聊得是Angularjs中的小明星$apply。当我们数据更新了,但是view层却没反应时,总能听到有人说,用apply吧,然后,懵懂无知的我们,在赋值代码后面加了$scope.$apply(),然后就惊喜...

北辰狼月
2018/07/01
0
0
angularjs学习:$digest

angularjs扩展了javascript的事件流程机制:它会扩展这个标准的浏览器流程,创建一个Angular上下文。这个Angular上下文指的是运行在Angular事件循环内的特定代码,该Angular事件循环通常被称...

Jack_Q
2015/06/04
0
0
AngularJs学习笔记--concepts(概念)

启动(Startup) 下面描述angular是如何启动的(参考图表与下面的例子): 1. 浏览器加载HTML,将HTML标签转换为DOM对象; 2. 浏览器加载angular.js的脚本; 3. Angular等待DOMContentLoade...

武文海
2015/02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

EasyExcel

<!-- alibaba EasyExcel escel导入导出 --> <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>1.0.0-RELEASE</version> </dependency>......

少年已不再年少
6分钟前
0
0
解决:warning: deprecated conversion from string constant to 'char*' [-Wwrite-strings]

代码 static int CheckOneReg(uint8_t busNo, char *title, int32_t addr, uint32_t *val, BOOL isPrintfNL, ErrMsg_t const *pMsg)res |= CheckOneReg(busNo,"fwVer:", HALREG_FW_VER, ......

SamXIAO
7分钟前
0
0
jenkins搭建全流程

安装环境   操作系统:linux   软件:jdk 8   软件:tomcat(apache-tomcat-7.0.90) 软件:jenkins 软件:maven 软件:git 1.1安装步骤 1.1.1安装jdk 由于Jenkins是基于Java开发的,安...

shzwork
13分钟前
0
0
Java的战争

本文来自微信公众号: 金捷幡(ID:jin-jiefan) ,作者:金捷幡,封面:拉里·埃里森(东方IC) 2019年5月,彻底撕破脸的特朗普掀起对华为的战争,谷歌被迫吊销了华为的Android授权。开源软...

Java领航员
今天
7
0
超详细的LM3414MRX/NOPB规格参数介绍就在这里

超详细的LM3414MRX/NOPB规格参数介绍就在这里 描述 LM3414和LM3414MRX/NOPB是具有1-A 60 W(1)共阳极功能的恒流降压LED驱动器。它们适用于驱动单串3-W HBLED,效率高达96%。它们可接受4.5...

不能吃肉的仙女
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部