angularjs的数据双向绑定怎么实现的？

Posted 2020-12-30 czl11

一. 单向绑定（ng-bind）和双向绑定（ng-model）的区别：

1.ng-bind 单向数据绑定（$scope->view），用于数据显示，简写形式，{{}}。

<span ng-bind="val"></span>
<span>{{val}}</span>

而这两者的区别，在于页面没有加载完毕时，{{val}}会直接显示到页面，直到angular渲染该绑定数据，这种写法可能将{{val}}让用户看到；而ng-bind则在angular渲染完毕后将数据显示。

2.ng-model是双向数据绑定（$scope->view , view->$scope），用于绑定值会变化到数据。

<input type="text" ng-model="val"  />

二. angularjs双向数据绑定原理

这里有三个概念：

1.  $digest(): 脏值检查循环；

2. $watch(): 监听；

3. $apply(): 上下文执行表达式.

angularjs脏值检查机制只在指定事件触发后，才会进入$digest cycle，包括：

1.dom事件，如文本输入，点击事件等。

2. XHR响应事件（$http/$https）；

3.浏览器Location变更事件($location)；

4.Timer事件($timeout, $interval)；

5.执行$digest()或$apply()；

->上述事件发生

->$digest()循环

->触发每个watcher

->watcher检查scope中，当前model值和上一次计算得到的model值是否一致

->如果不同，则$watch()对应的回调函数会被执行

->调用该函数的结果，就是view中的表达式内容会被更新。

angularjs并不直接调用$digest()，而是调用$scope.$apply()，后者会调用$rootScope.$digest()。所以，一轮$digest()循环在$rootScope开始，然后会访问到所有到子scope中到watchers。