angular源码分析6-脏值检测实现

scope树状结构

angular内置一个 $rootScope服务，rootScope是angular做用范围的顶级做用域，也是做用域的源头。$rootScope能够产生子scope，子scope能够产生子scope，最终生成一个以rootScope为根节点的scope树。以下图所示：

 Scope是一个构造器函数，new Scope就建立了一个子做用域，而且这个子做用域是由其父做用域建立的。

下面用代码模拟实现一个scope是如何工做的，是如何实现数据绑定和脏值检测的。

脏值检测实现

指令的做用域是构造函数Scope的实例，即做用域是一个Scope实例化的对象。

$watch方法用来注册监听的做用于域的的值，当值发生变化时，执行相应的操做。

 

$digest方法用来触发某个scope对象脏值检测。脏值检测触发开始后，若是在一轮检测过程当中，存在newVaule与oldValue不一样，这一轮脏值检测结束后，会进入下一轮脏值检测，直到全部的newValue和oldValue值限公或执行的轮数超过指定的脏值检测最大的轮数，结束脏值检测。

$apply触发脏值检测，相比较$digest，（1）$apply先执行传入的参数（函数），$digest没有传参 （2）$apply而后从根节点触发脏值检测，使根做用域和其子做用域都进行脏值检测，$digest只是触发当前做用域的脏值检测 （3）最后，$apply返回传入的函数执行的结果。

使用实例

实例1

实例2（ng-bind）

ng-bind指令实现

以下angular内置的指令ng-bind，在连接阶段，执行postLink即函数ngBindLink时，对ng-bind的值监听注册，当ng-bind的值改变时，就更新ng-bind所属的元素的节点显示值。

ng-bind使用

html模板

自定myDirective指令，模板中使用了ng-bind指令。

浏览器上显示结果，显示了绑定的scope.color的值。

下面看一下scope.color第一次绑定到div的过程。

html文档加载完之后，开始调用angularInit方法初始化angular。执行1489行到第1492行代码，编译连接全部指令后，调用$apply触发脏值检测，从根做用域到全部子做用域都进行脏值检测，这样绑定的数据显示在view上。在定义ng-bind指令时，监听注册了ng-bind的值。在脏值检测时，scope.color有undefind变为'red'，值发生了改变，调用ngBindWatchAction监听函数，更新view的值，即ng-bind所属的div的值为red。