《AngularJS中的$watch()$digest()和$apply()区分_.docx》由会员分享，可在线阅读，更多相关《AngularJS中的$watch()$digest()和$apply()区分_.docx（6页珍藏版）》请在三一文库上搜索。
1、AngularJS中的$watch()，$digest()和$apply()区分_ 这篇文章主要介绍了AngularJS中的$watch()，$digest()和$apply()区分，感爱好的伴侣可以参考一下 AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函数，学习AngularJS必需理解这几个函数。 在绑定$scope中的变量到view的时候，AngularJS自动在内部创建一个Watch。Watch用于监听AngularJS scope中变量的转变。可以通过调用$scope.$watch()这个方法来创建Watch。
2、 $scope.$digest()函数会循环访问全部的watches，并检测其所监听的$scope中的变量是否转变。假如变量发生转变，会调用该变量对应的监听函数。监听函数可以实现许多操作，比如让html里面的text文本显示最新的变量值。可见，$scope.$digest是可以触发数据绑定更新的。 大部分状况下，AngualrJS会自动调用$scope.$watch()和$scope.$digest()函数，但是在某些状况下，我们需要手动调用他们，因此，有必要了解他们是怎么工作的。 $scope.$apply()这个函数会先执行一些代码，之后在调用$scope.$digest()。全部的wat
3、ches会被检测一次，相应的监听函数也会被执行。$scope.$apply()在AngularJS与其它javascript代码集成时是很有用的。 接下来我们具体的讲解下$watch(), $digest() 和 $apply()。 $watch() $watch(watchExpression, listener, objectEquality) watchExpression：监听对象，可以是string或者function(scope) listener：监听对象发生转变时执行的回调函数function(newVal,oldVal,scope) objectEquality：是否深度监听
4、，假如设置为true，它告诉Angular检查所监控的对象中每一个属性的改变。假如你盼望监控数组的个别元素或者对象的属性而不是一个一般的值, 那么你应当用法它。（默认值：false） $digest() 检测当前scope以及子scope中全部的watches，由于监听函数会在执行过程中修改model(scope中的变量)，$digest()会始终被调用直到model没有再变。当调用超过10次时，$digest()会抛出一个特别Maximum iteration limit exceeded，以此来防止程序进入一个死循环。 $apply() $apply(exp) exp：string或者fu
5、nction(scope) $apply()生命周期伪代码示意图如下 function $apply(expr) try return $eval(expr); catch (e) $exceptionHandler(e); finally $root.$digest(); Example 下面我们通过一个例子来说明$watch,$digest和$apply。 script var module = angular.module(myapp, ); var myController1 = module.controller(myController, function($scope) $sco
6、pe.data = time : new Date() ; $scope.updateTime = function() $scope.data.time = new Date(); document.getElementById(updateTimeButton) .addEventListener(click, function() console.log(update time clicked); $scope.data.time = new Date(); ); ); /script body ng-app=myapp div ng-controller=myController da
7、ta.time br/ button ng-click=updateTime()update time - ng-click/button button id=updateTimeButton update time/button /div /body 这段代码会绑定$scope.data.time到HTML中显示出来，同时这个绑定会自动创建一个watch来监听$scope.date.time的改变。此外，这里还有2个按钮，第一个按钮是通过ng-click Directive来调用$scope.updateTime方法，之后AngularJS会自动执行$scope.$digest()使最新的时
8、间显示到HTML中。其次个按钮是通过javascript代码添加一个点击大事，以此来更新HTML中的时间。但是其次个按钮是不能工作的，它的解决方法是在点击大事的最终手动的去调用$scope.$digest()方法，如下： document.getElementById(updateTimeButton) .addEventListener(click, function() console.log(update time clicked); $scope.data.time = new Date(); $scope.$digest(); ); 另外一个解决方法是调用$scope.$apply()，如下： document.getElementById(updateTimeButton) .addEventListener(click, function() $scope.$apply(function() console.log(update time clicked); $scope.data.time = new Date(); ); ); 以上就是本文的全部内容，盼望对大家的学习有所关心。 .