说起angular的数据绑定，你可能脑海马上出现的就是这些$apply,$watch,$digest和脏值检测这个名词。
正是由于这些名词背后的含义与功能组成了angular双向数据绑定这一项强大的功能。
首先来看一下一张图，下面的来自angular官方的图片。解释了angular在数据绑定这部分是如何与浏览器的event loop机制做交互的。
学习这个这个知识点之前，首先要理解下浏览器的event loop机制：
- 浏览器的事件循环等待事件的触发。所谓事件包括用户的交互操作、定时事件、或者网络事件(服务器的响应)。
- 事件触发后，回调会被执行。此时会进入Javascript上下文。通常回调可以用来修改DOM结构。
- 一旦回调执行完毕，浏览器就会离开Javascript上下文，并且根据DOM的修改重新渲染视图。
那如何从JS context切换到angular context呢，这个过程是怎么实现的呢？
答案就在angular 提供的$apply()函数：
通常情况下，你不需要自己调用$apply()函数，这是因为$apply()都已经被用来处理当前事件的相应指令执行过了。
只有当你使用自定义的事件回调或者是使用第三方类库的回调时，才需要自己执行$apply()
下面的数据绑定过程来自angluar中文社区：
- 通过调用
scope.$apply(stimulusFn)来进入AngularJS的执行上下文，这里的stimulusFn是你希望在AngularJS执行上下文中执行的函数。 - AngularJS会执行
stimulusFn()，这个函数一般会改变应用的状态。 - AngularJS进入$digest循环。这个循环是由两个小循环组成的，这两个小循环用来处理处理$evalAsync队列和$watch列表。这个$digest循环直到模型“稳定”前会一直迭代。这个稳定具体指的是$evalAsync对表为空，并且$watch列表中检测不到任何改变了。
- 这个$evalAsync队列是用来管理那些“视图渲染前需要在当前栈框架外执行的操作的”。这通常使用
setTimeout(0)来完成的。用setTimeout(0)会有速度慢的问题。并且，因为浏览器是根据事件队列按顺序渲染视图的，还会造成视图的抖动。 - $watch列表是一个表达式的集合，这些表达式可能是自上次迭代后发生了改变的。如果有检测到了有改变，那么$watch函数就会被调用，它通常会把新的值更新到DOM中。
- 一旦AngularJS的$digest循环结束，整个执行就会离开AngularJS和Javascript的上下文。这些都是在浏览器为数据改变而进行重渲染之后进行的。
这里你需要理解一些东西：
一、$watch list
$watch list的操作发生在指令的link阶段。
每次你需要把model上的数据绑定到你的view上时,$watch队列就会插入一条对应的$watch。$watch就是监视的model里数据变化的东西。
看一下下面的代码：
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div ng-controller="MainCtrl"> <input type="text" ng-model="name"/> <input type="text" ng-model="age"/> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script type="text/javascript"> var app=angular.module('app',[]); app.controller('MainCtrl',function ($scope){ $scope.name='chenwei'; $scope.age='25'; $scope.text='world'; }); </script> </body> </html>
$scope上有三个对象：name,age,text。我把name和age绑定到了对应的输入框上，text没有绑定，这时候只会向$watch list上插入name和age两个$watch。
二、$digest loop
$digest loop 有两个子循环组成：一个处理evalAsync队列，另一个处理$watch队列。
当浏览器接收到可以被angular context处理的事件时，$digest循环就会触发。
$digest 会去遍历$watch list队列，去检测里面的每一项$watch是否发生变化。
这里需要注意的一点就是，如果有至少一个$watch更新过，这个循环就会再次触发，直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。记住如果循环超过10次的话，它将会抛出一个异常，防止无限循环。 当$digest循环结束时，DOM相应地变化。
三、定义自己的watch
$scope对象有一个可供开发者调用的$watch('watchName',fn,boolean)函数
看一个具体的代码例子：
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div ng-controller="MainCtrl"> <input type="text" ng-model="name"/> <input type="text" ng-model="age"/> <p>your name changed {{changeCount}} times</p> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script type="text/javascript"> var app=angular.module('app',[]); app.controller('MainCtrl',function ($scope){ $scope.name='chenwei'; $scope.age='25'; $scope.text='world'; $scope.changeCount=0; $scope.$watch('name',function (newValue,oldValue){ if(newValue===oldValue){ return; } $scope.changeCount++; },true) }); </script> </body> </html>
上面的列子里我用$watch函数去检测name的值，一旦name的值发生变化，我就把它记录下来，并通过changeCount亮来通知name变化的次数