angular中的双向数据绑定和脏值检查

AngularJS双向数据绑定(MVVM)

Angular中的双向数据绑定指的是，当view中有任何数据发生了变化，那么这个变化也会自动反馈到$scope数据上；类似的，当scope模型发生变化时，view中的数据也会更新最新值；

 

原理：当有表达式 ng-model 时，AngularJS在幕后会给scope模型上设置一个watcher，它用来在数据发生变化时更新view，这里的watcher和在AngularJS中设置的watcher一样。

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

 

脏值检查

$digest 和 $apply 都是脏值检查的主内容。

 

例：
in html：  <input ng-model="value" />
in controller.js:  $scope.value = "HELLo";

 

我们只要改变input里的值，在controller里对应的$scope.value 也会随之发生相同的变化，这里就是给$watch列表添加了一个监控函数，从而做到这个效果的。

$watch 列表就是给所有绑定到同一$scope 对象的UI元素添加一个监控函数到$watch列表里。

$watch 列表会触发$digest循环，并且在$digest循环中通过"脏值检查"机制进行解析。

 

什么是脏值检查？简单来说，就是Angular检查模型的值是否发生了变化，而程序还没对该变化进行同步的机制。Angular 将会通过脏值检查遍历整个$watch 列表，只要当中的某个值发生了变化，应用就会退回到$digest循环中，直到检测到这个值不再发生变化，然后再启用新值并且继续遍历$watch列表。整个$watch 列表循环后，且其中的值都不再变化了，那么整个应用程序的model也就趋于稳定了，这时候才在view渲染该有的数据。  

 

常见的错误

Error: [$rootScope: infding] 10 $digest()  iterations reached. Abort...

$digest 循环运行10次，Angular就会抛出这个异常，同时停止$digest循环。而10这个次数可以在config里面注入$rootScopeProvider服务并且配置；

$rootScopeProvider.digestTtl(15);

 

$digest 循环是脏值检查机制的主体。那么 $digest怎么玩呢?

$digest会被自动进入，比如$scope的$watch列表中值发生变化，则会触发$digest循环。

当我们使用$apply 就可以召唤$digest了；

$apply() 函数在框架外部让表达式在Angular上下文内部执行；

Angular提供的可用于视图中任意指令都可调用$apply(), 比如：ng-click，ng-change等。

还有一些Angular内置的服务会调用$digest(), 如$http服务。

Angular不建议在controller内操作DOM，DOM应该在Directive中使用；

不建议在controller中使用$apply；

转载于:https://www.cnblogs.com/dxt510/p/7151203.html