Angular数据绑定机制

关键词：$watch, $digest, $apply, dirty-checking

1.Angular.js扩展浏览器的事件循环

浏览器持续等待例如用户交互这样的事件。当你在一个<input>标签里输入字符以后，这个事件的回调函数在JS解释器中执行了其包含的DOM操做，执行完毕后，浏览器响应地对DOM作出了变化。Angular拓展了这个事件循环，使它有时候成为angular context 的执行环境。

2.$watch list

$watch 能够检测model的变化。每当绑定一个数据到view上的时候，$watch队列就会插入一条对应的$watch。例子以下：

• controller.js：

app.controller('MainCtrl', function($scope) {
  $scope.people = [...]; // 假设长度为10
});

• index.html:

<ul>
  <li ng-repeat="person in people">
      {{person.name}} - {{person.age}}
  </li>
</ul>

其中ng-repeat 生成了一个1个$watch，每一个person生成了2个$watch，总共是（1+2*10），21个$watch。$watch的生成阶段是模板加载完成，也就是linking阶段。（angular分为compile和linking阶段），Angular会寻找每一个directive（上面的例子中ng-repeat和{{}}都属于directive），而后生成每一个$watch。

3.$digest 循环

当浏览器接收到angular context相关的事件时，$digest循环就会被触发。它由2个小循环组成，1个处理evalAsync 队列，另外一个处理$watch队列。$digest进行循环时，将遍历$watch队列，查看是否有数据更新过，这种遍历就叫作dirty-checkin（脏检查），若是脏检查发现有$watch更新，将会触发新的脏检查，直到全部的$watch都没有更新。这样就能保证每一个model都不会变化。

脏检查超过10次后会抛出异常防止无限循环。$digest循环结束后DOM会相应地发生变化。其实$digest从字面意义理解就像“消化”的过程同样，逐渐地把全部养分（$watch的变化）都吸取掉。

4.经过$apply 进入 angular context

$apply 决定事件是否进入angular context，使用angualr的自带directive，好比ng-model，更改绑定的数据时，angular会将事件封装到$apply中。好比，ng-model="name"的输入框，输入字符“w”，事件会调用，$apply("name='w';")，完成$scope中的数据更新。
调用第三方库时的数据绑定
当在angular中调用jquery，并不能更新jquery绑定的数据，由于jquery没有调用$apply，事件没有进入angular context，致使$digest没有执行。例子以下：

• app.js

app.directive('clickable', function() {
    return {
      restrict: "E",
      scope: {
        count1: '=',
        count2: '='
      },
      template: '<ul style="background-color: lightblue"><li>{{count1}}</li><li>{{count2}}</li></ul>',
      link: function(scope, element, attrs) {
        element.bind('click', function() {
          scope.count1++;
          scope.count2++;
        });
      }
    }
});
app.controller('MainCtrl', function($scope) {
  $scope.count1= 0;
  $scope.count2= 0;
});

例子中，每次点击该元素，预期count1和count2都会自增1，但实际没有。其实$scope（ViewModel）已经改变，可是没有强制执行$digest。修改click事件以下：

element.bind('click', function() {
  scope.$apply(function() {
      scope.foo++;
      scope.bar++;
  });
})

通过调用$apply实现了预期。

5.总结

angular事件绑定机制以下图：