AngularJS1.X版本双向绑定九问

Posted 2021-01-28 静谧coding

前言

由于工作的原因，使用angular1.x版本已经有一段时间了，虽然angualr2升级后就完全重构了，但每个版本存在也有一定的道理。话不多说，进入正题。

1.双向绑定的原理是什么？

AngualrJS的双向绑定基于脏检查机制，$scope上有一个监听队列，每当向视图上绑定一个值，就会向watch list中插入一个watch，当遇到可以被Angular context处理的事件，就会触发$digest循环，遍历所有的watch，更新DOM。

2.什么操作会触发$digest循环？

UI发生变化，ajax请求，ng-click,$timeout...

3.如果一个watch中又包含一个watch，该watch中对应的scope model发生了变化，这种情况是怎么处理的呢？

$digest循环并不是只运行一次的，一旦angualar运行整个$watch列表，如果任何值发生改变，应用程序将回退到$watch循环，直到它检测到没有任何更改。

4.如上所述，如果有值发生变化就回退到watch循环，这样会造成死循环吗？

不会，如果循环运行超过十次，angular会抛出异常，应用程序就会死掉。

5.如下代码，ng-click事件什么都没有做，会有脏检查吗？

<button ng-click="">click</button>

会。

6.隐藏的元素，会检查绑定在它上面的表达式吗？

会。

7.重复的表达式会重复检查吗？

会。
关于以上三个问题的总结，一个绑定表达式只要放在当前 DOM 树里就会被监视，不管它是否可见，不管它是否被放在另一个 Tab 里，更不管它是否与用户操作相关。

8.$apply与$digest的区别

$apply会从rootScope上调用$digest

9.什么情况下手动调用$apply？

大致想到两种场景

• 自定义指令，绑定到$scope上的数据，更新DOM
• setTimeout的回调函数中涉及对$scope上的数据进行操作，要更新对应的视图。（将setTimeout改成$timeout的话，就不用手动调用$scope.$apply了）

后记

如有写的不正确的地方，欢迎留言讨论。参考文章The-Digest-Loop-and-apply

另外附上我的掘金地址https://juejin.im/user/5c0760bee51d451db767bd04，以后掘金上也会更新文章啦。