AngularJS1.X版本双向绑定九问

前言

因为工做的缘由,使用angular1.x版本已经有一段时间了,虽然angualr2升级后就彻底重构了,但每一个版本存在也有必定的道理。话很少说,进入正题。ajax

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

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

2.什么操做会触发$digest循环?

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

3.若是一个watch中又包含一个watch,该watch中对应的scope model发生了变化,这种状况是怎么处理的呢?

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

4.如上所述,若是有值发生变化就回退到watch循环,这样会形成死循环吗?

不会,若是循环运行超过十次,angular会抛出异常,应用程序就会死掉。双向绑定

5.以下代码,ng-click事件什么都没有作,会有脏检查吗?

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

会。code

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

会。blog

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


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

8.$apply与$digest的区别

$apply会从rootScope上调用$digest事件

9.什么状况下手动调用$apply?

大体想到两种场景get

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

后记

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

另外附上个人掘金地址 https://juejin.im/user/5c0760bee51d451db767bd04,之后掘金上也会更新文章啦。
相关文章
相关标签/搜索