AngularJS中的$watch()，$digest()和$apply()区分_

《AngularJS中的$watch()，$digest()和$apply()区分_》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、AngularJS中的$watch()，$digest()和$apply()区分_这篇文章主要介绍了AngularJS中的$watch()，$digest()和$apply()区分，感爱好的伴侣可以参考一下AngularJS$scope里面的$watch(),$digest()和$apply()是AngularJS的核心函数，学习AngularJS必需理解这几个函数。在绑定$scope中的变量到view的时候，AngularJS自动在内部创建一个"Watch"。"Watch"用于监听AngularJSscope中变量的转变。可以通过

2、调用$scope.$watch()这个方法来创建"Watch"。$scope.$digest()函数会循环访问全部的watches，并检测其所监听的$scope中的变量是否转变。假如变量发生转变，会调用该变量对应的监听函数。监听函数可以实现许多操作，比如让html里面的text文本显示最新的变量值。可见，$scope.$digest是可以触发数据绑定更新的。大部分状况下，AngualrJS会自动调用$scope.$watch()和$scope.$digest()函数，但是在某些状况下，我们需要手动调用他们，因此，有必要了解他们是怎么

3、工作的。$scope.$apply()这个函数会先执行一些代码，之后在调用$scope.$digest()。全部的watches会被检测一次，相应的监听函数也会被执行。$scope.$apply()在AngularJS与其它javascript代码集成时是很有用的。接下来我们具体的讲解下$watch(),$digest()和$apply()。$watch()$watch(watchExpression,listener,[objectEquality])watchExpression：监听对象，可以是string或者function

4、(scope){}listener：监听对象发生转变时执行的回调函数function(newVal,oldVal,scope){}objectEquality：是否深度监听，假如设置为true，它告诉Angular检查所监控的对象中每一个属性的改变。假如你盼望监控数组的个别元素或者对象的属性而不是一个一般的值,那么你应当用法它。（默认值：false）$digest()检测当前scope以及子scope中全部的watches，由于监听函数会在执行过程中修改model(scope中的变量)，$digest()会始终被调用直到model没

5、有再变。当调用超过10次时，$digest()会抛出一个特别"Maximumiterationlimitexceeded'，以此来防止程序进入一个死循环。$apply()$apply([exp])exp：string或者function(scope){}$apply()生命周期伪代码示意图如下function$apply(expr){try{return$eval(expr);}catch(e){$exceptionHandler(e);}finally{$root.$digest();}}Example下面我们通过一个例子来说明$

6、watch,$digest和$apply。scriptvarmodule=angular.module("myapp",[]);varmyController1=module.controller("myController",function($scope){$scope.data={time:newDate()};$scope.updateTime=function(){$scope.data.time=newDate();}document.getElementById("updateTimeButton").addEvent

7、Listener('click',function(){console.log("updatetimeclicked");$scope.data.time=newDate();});});/scriptbodyng-app="myapp"divng-controller="myController"{{data.time}}br/buttonng-click="updateTime()"updatetime-ng-click/buttonbuttonid="updateTimeButton"updatetime/button/div

8、/body这段代码会绑定$scope.data.time到HTML中显示出来，同时这个绑定会自动创建一个watch来监听$scope.date.time的改变。此外，这里还有2个按钮，第一个按钮是通过ng-clickDirective