标题：

【修真院web（职业）小课堂】angularjs双向绑定后，发生了什么事情？是什么可以让view层和controller层进行绑定的？

开场语：

大家好，我是IT修真院北京分院第36期的学员张新，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网web（职业）任务8，深度思考中的知识点——angularjs双向绑定后，发生了什么事情？是什么可以让view层和controller层进行绑定的？

（1）背景介绍：

Angular实现了双向绑定机制

所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面

（2）知识剖析：

2.如何绑定

如果让我们自己实现双向绑定该怎么写：

3.如何实现

众所周知，angular是一个MVVM（Model-View，View-Model）模式的框架，可以实现数据和视图数据绑定。MVVM把数据加工的任务从Controller中解放了出来。使得Controller只需专注于数据调配的工作。

View是angularjs编译html后呈现出来的，需要编译的是controller中的定义的属性和方法以及directive中定义的指令。

View和controller是独立开来的，他们之间的纽带就是图中间的胶水——scope。Controller负责向scope中提供属性和方法，便于和view层面的html进行交互。

Angular双向绑定通过watch,digest和apply实现的。

watch序列

watch监控model中是否有变化，会记录last值，也就是改变后的值，每一个model都会增加一个watch到watch队列中。

digest循环

当浏览器接收到可以被angular context处理的事件时，digest循环就会触发，这个循环有两个子循环，一个处理evalAsync队列，另一个处理watch队列，digest会遍历watch,然后询问：

既然所有的watch都检查完了，那就要问了：有没有watch更新过？如果有至少一个更新过，这个循环就会再次触发，直到所有的watch都没有变化。这样就能够保证每个model都已经不会再变化。记住如果循环超过10次的话，它将会抛出一个异常，防止无限循环。 当digest循环结束时，DOM相应地变化。

这个就是所谓的dirty-check，angular实际会引入了一个初始值为false的dirty变量作为循环条件，如果有改变过（也就是新旧值不相等），dirty变为true，循环继续。这里很重要的（也是许多人的很蛋疼的地方）是每一个进入angular context的事件都会执行一个digest循环，也就是说每次我们输入一个字母循环都会检查整个页面的所有watch。

那是什么决定一个事件是否进入angular context呢？

答案是apply

我之前碰到过在angular中使用普通的事件，无法双向绑定的事情：

这里值虽然改变了，但是没有强制执行$degest,监视foo的watch根本没有执行，执行一次apply之后，watch就会知道这些变化，更新dom了。

这里只需要加上scope.$apply()就行了。

一般带ng的事件angular都会给你自动添加好了apply，所以你要操纵事件的时候加上apply才能实现数据输出到view层中。

作者：一个要娶张静初的人
链接：https://www.jianshu.com/p/5e42b6ce3dde
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

（3）常见问题：

digest和apply有何区别？干嘛不直接使用digest?

（4）解决方案：

5.解决方法

1.apply可以带参数，它可以接受一个函数，然后在应用数据之后，调用这个函数。

2.当调用digest的时候，只触发当前作用域和它的子作用域上的监控，但是当调用apply的时候，会触发作用域树上的所有监控。

请看这个例子：

（5）编码实战：

             `app.directive('clickable', function() {

return {
restrict: "E",
scope: false,
template: '<ul style="background-color: lightblue"><li>{{foo}}</li><li>{{bar}}</li></ul>',
link: function(scope, element, attrs) {
element.bind('click', function() {
scope.foo++;
});
}
}

});

app.controller('MainCtrl', function(scope) {scope.foo = 0;
});`                            

（6）拓展思考：

脏检查如何被触发

angular 会在可能触发 UI 变更的时候进行脏检查：这句话并不准确。实际上脏检查是digest执行的，另一个更常用的用于触发脏检查的函数apply——其实就是 $digest 的一个简单封装（还做了一些抓异常的工作）。

通常写代码时我们无需主动调用 apply或 apply或digest 是因为 angular 在外部对我们的回调函数做了包装。例如常用的 ng-click，这是一个指令（Directive），$digest过程的逻辑就是检查watcher列表中的每一项，看当前值与上次的值是否相同，如果不同则调用listener回调函数。这就是dirty-checking的核心逻辑                       

（7）参考文献：

参考一：Angular中文社区

参考二：杰锅锅的博客

（8）更多讨论：

Q1：提问人：问题一：为什么例五里面自定义指令需要调用$apply方法？是不是自定义指令都不具备$apply方法？                                   

A1：回答人（可以是分享人，也可以是其他学员）：

答：不是。不是因为自定义指令本身不具有$apply方法，因为element.on（“click”，function{}）这实际上是一个jQuery方法，而jQuery是不具备$apply方法的。如果我们把scope.b++使用一个angular方法去触发，是不用调用$apply就可以触发的。

Q2：提问人：问题二：前文提到的循环十次会抛出异常，是指什么？                                    

A2：回答人（可以是分享人，也可以是其他学员）：

是指在一个ng-指令（本身已经自带$apply方法）内部再次调用$apply方法，就会抛出异常。这实际上是angular的保护机制。Q3：提问人：

dirty-checking这么复杂，会不会速度很慢？                                   

 A3：回答人（可以是分享人，也可以是其他学员）：

不会的，实际上运行的很快。而且在ES6普及后，angular的未来版本会加入Object.observe，$digest循环的速度会更快。

（9）鸣谢：

感谢XX、XX师兄，此教程是在他们之前技术分享的基础上完善而成。

（10）结束语：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~