当一个作用域创建完之后，$scope.$digest会被运行一次。dirty的默认值被设定为true，因此，如果你在controller里面使用了$watch，并且进行了属性赋值，往往刷新页面就可以看到$watch的回调函数被执行了。但是，现在问题来了，上面说的“angular内部会调用$digest()”，这个内部是怎么实现的？
$apply触发$digest
在我们自己编程时，并不直接使用$digest，而是调用$scope.$apply()，$apply内部会触发$digest递归遍历。同时，你可以给$apply传一个参数，是个函数，这个函数会在$digest开始之前执行。现在回到上面的问题，angular内部怎么触发$digest？实际上，angular里面要求你通过ng-click, ng-modal, ng-keyup等来进行数据的双向绑定，为什么，因为这些angular的内部指令封装了$apply，比如ng-click，它其实包含了document.addEventListener('click')和$scope.$apply()。
当用户在模板里面使用ng-click时，如下：
<div ng-click="update()">change</div>
$scope.update = function() { $scope.name = 'tom' }
实际上，当用户点击之后，angular内部还会执行$scope.$apply()，从而触发$digest遍历递归，最终触发界面重绘。
手动调用$apply
但是有些情况下，我们不可能直接使用angular内部指令，有两种情况我们需要手动调用$apply，一种是调用angular内置的语法糖，比如$http, $timeout，另一种是我们没有使用angular内部机制去更新了$scope，比如我们用$element.on('click', () => $scope.name = 'lucy')。也就是说“异步”和“机制外”修改$scope属性值之后，我们都要手动调用$apply，虽然我们在调用$timeout的时候，没有手写$apply，但实际上它内部确实调用了$apply:
function($timeout) { // 当我们通过on('click')的方式触发某些更新的时候，可以这样做 $timeout(() => { $scope.name = 'lily' }) // 也可以这样做 $element.on('click', () => { $scope.name = 'david' $scope.$apply() }) }
但是，一定要注意，在递归过程中，绝对不能手动调用$apply，比如在ng-click的函数中，比如在$watch的回调函数中。
伪代码实现
通过上面的讲解，你可能已经对angular里面的脏检查已经了解了，但是我们还是希望更深入，用代码来把事情说清楚。我这里不去抄写angular的源码，而是自己写一段伪代码，这样更有助于理解整个机制。
import { isEqual } from 'lodash' class Scope { constructor() { this.$$dirty = true this.$$count = 0 this.$$watchers = [] } $watch(property, listener, deepEqual) { let watcher = { property, listener, deepEqual, } this.$$watchers.push(watcher) } $digest() { if (this.$$count >= 10) { throw new Error('$digest超过10次') } this.$$watchers.forEach(watcher => { let newValue = eval('return this.' + watcher.property) let oldValue = watcher.oldValue if (watcher.deepEqual && isEqual(newValue, oldValue)) { watcher.dirty = false } else if (newValue === oldValue) { watcher.dirty = false } else { watcher.dirty = true eval('this.' + watcher.property + ' = ' newValue) watcher.listener(newValue, oldValue) // 注意，listener是在newValue赋值给$scope之后执行的 watcher.oldValue = newValue } // 这里的实现和angular逻辑里面有一点不同，angular里面，当newValue和oldValue都为undefined时，listener会被调用，可能是angular里面在$watch的时候，会自动给$scope加上原本没有的属性，因此认为是一次变动 }) this.$$count ++ this.$$dirty = false for (let watcher of this.$$watchers) { if (watcher.dirty) { this.$$dirty = true break } } if (this.$$dirty) { this.$digest() } else { this.$patch() this.$$dirty = true this.$$count = 0 } } $apply() { if (this.$$count) { return // 当$digest执行的过程中，不能触发$apply } this.$$dirty = true this.$$count = 0 this.$digest() } $patch() { // 重绘界面 } }
function ControllerRegister(controllerTemplate, controllerFunction) { let $scope = new Scope() $paser(controllerTemplate, $scope) // 解析controller的模板，把模板中的属性全部都解析出来，并且把这些属性赋值给$scope controllerFunction($scope) // 在controllerFunction内部可能又给$scope添加了一些属性，注意，不能在运行controllerFunction的时候调用$scope.$apply() let properties = Object.keys($scope) // 找出$scope上的所有属性 // 要把$scope上的一些内置属性排除掉 properties = properties.filter(item => item.indexOf('$') !== 0) // 当然，这种排除方法只能保证在用户不使用$作为属性开头的时候有用 properties.forEach(property => { $scope.$watch(property, () => {}, true) }) $scope.$digest() }
上面就是用伪代码实现了angular内部的机制，不能作为真实的引擎去使用，但是体现了整个脏检查的实现思路。