再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结 (2)

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

 

$digest 循环会运行多少次?

$digest 循环的上限是 10 次(超过 10次后抛出一个异常,防止无限循环)。

$digest 循环不会只运行一次。在当前的一次循环结束后,它会再执行一次循环用来检查是否有 models 发生了变化。

这就是脏检查(Dirty Checking),它用来处理在 listener 函数被执行时可能引起的 model 变化。因此 $digest 循环会持续运行直到 model 不再发生变化,或者 $digest 循环的次数达到了 10 次(超过 10 次后抛出一个异常,防止无限循环)。

当 $digest 循环结束时,DOM 相应地变化。

脏检查如何被触发?

angular 会在可能触发 UI 变更的时候进行脏检查:这句话并不准确。实际上,

脏检查是digest执行的,另一个更常用的用于触发脏检查的函数apply——其实就是 $digest 的一个简单封装(还做了一些抓异常的工作)。

通常写代码时我们无需主动调用 $apply 或 $digest 是因为 angular 在外部对我们的回调函数做了包装。例如常用的 ng-click,这是一个指令(Directive),内部实现则 类似于

DOM.addEventListener('click', function ($scope) {   $scope.$apply(() => userCode()); });

angular对常用的dom事件,xhq事件作了封装,如果调用这些封装,就会在里面触发进入angular的digest流程,主要有以下情况:

DOM事件,如用户输入文本,点击按钮等,(ng-click)

XHQ响应事件($http)

浏览器Location变更事件,即Url中hash部分变更($location)

Timer事件($Timeout,$interval)

手动调用$apply或$digest

 

$apply() 和$digest() 的区别?

 

$apply 是 $scope(或者是 direcvie 里的 link 函数中的 scope)的一个函数,调用它会强制一次 $digest 循环(除非当前正在执行循环,这种情况下会抛出一个异常,这是我们不需要在那里执行 $apply 的标志)。

$apply() 和 $digest() 有两个区别。

1) 最直接的差异是, $apply 可以带参数,它可以接受一个函数,然后在应用数据之后,调用这个函数。所以,一般在集成非 Angular 框架(比如jQuery)的代码时,可以把代码写在这个里面调用。

2) 当调用 $digest 的时候,只触发当前作用域和它的子作用域上的监控,但是当调用 $apply 的时候,会触发作用域树上的所有监控。

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

取决于是否在 Angular 上下文环境(angular context)。

AngularJS对此有着非常明确的要求,就是它只负责对发生于AngularJS上下文环境中的变更会做出自动地响应(即,在$apply()方法中发生的对于models的更改)。AngularJS的built-in指令就是这样做的,所以任何的model变更都会被反映到view中。但是,如果你在AngularJS上下文之外的任何地方修改了model,那么你就需要通过手动调用$apply()来通知AngularJS。这就像告诉AngularJS,你修改了一些models,希望AngularJS帮你触发watchers来做出正确的响应。

典型的需要调用 $apply() 方法的场景是:

1) 使用了 JavaScript 中的 setTimeout() 来更新一个 scope model

2) 用指令设置一个 DOM 事件 listener 并且在该 listener 中修改了一些 models

场景一

$scope.setMsg = function() {     setTimeout(function() {         $scope.message = 'hello world';         console.log('message:' + $scope.message);     }, 2000); } $scope.setMsg();

运行这个例子,会看到过了两秒钟之后,控制台确实会显示出已经更新的 model,然而,view 并没有更新。

在 $scope.getMessage 加入 $apply() 方法。

$scope.getMessage = function() {     setTimeout(function() {         $scope.$apply(function() {             $scope.message = 'hello world';             console.log('message:' + $scope.message);         });     }, 2000); }

再运行就 OK 了。

 

不过,在 AngularJS 中应该尽量使用 $timeout Service 来代替 setTimeout(),因为前者会帮你调用 $apply(),让你不需要手动地调用它。

场景二

实现一个 click 的指令,类似以下功能,directive 的编写如下:

app.directive("inc", function() {     return function (scope, element, attr) {         element.on("click", function() {             scope.val++;         });     }; });

 

跟场景一的结果一样,这个时候,点击按钮,界面上的数字并不会增加。但查看调试器,发现数据确实已经增加了。

在 scope.val++; 一行后面添加 scope.$apply(); 或者 scope.$digest(); 就 OK 了。

$apply() 方法的两种形式 //无参 $scope.$apply() //有参 $scope.$apply(function(){     ... })

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zywzxj.html