angular.js如何检测该模型已更改

时间:2013-10-05 17:48:11

标签: javascript angularjs

我很有意思,angular.js内部如何检测模型被更改,以及用于处理此更改的一般角度工作流程是什么。我的意思是,在我更改模块的某些部分之后,页面上真正发生的事情。

1 个答案:

答案 0 :(得分:0)

这是我的理解。如果我错了,请纠正我。这是双向信息共享:)

如果您知道数据绑定实际上是如何工作的,那么数据绑定并不神奇。

为了使任何变量具有数据绑定功能,必须使用$ watch方法进行注册。

$scope.$watch('aVarModel', function(newValue, oldValue) {
  //update the DOM with newValue
});

每当$ scope。$ digest被调用时,将检查通过$ watch的所有这些绑定数据。请注意,Angular不会检查范围中的所有值,而只检查使用$ watch方法注册的值。如果未使用观察者注册模型,则不会进行检查。它会比较旧值和新值,以检查其中是否有任何更改。如果它改变,它将触发监听器功能(观察者方法的第二个参数)。

你可能会问你没有使用$ watch或调用$ digest注册范围内的任何变量来检查更改,但仍然会发生数据绑定。为什么呢?

AngularJS有许多内置指令实际上调​​用它后面的$ digest方法并观察变量以使我们的工作更容易。例如:

<div ng-app ng-init="qty=1;cost=2">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" ng-model="qty">
  </div>
  <div>
    Costs: <input type="number" min="0" ng-model="cost">
  </div>
  <div>
     <b>Total:</b> {{qty * cost | currency}}
  </div>
</div>

内置的ng-model指令实际上为数量和成本变量注册观察者并调用$ scope。$ digest每当值发生变化时我们都不知道。您可以创建自定义指令

忘记提及,{{}}内的每个表达式也会在编译阶段自动被监视。因此它会随着应用程序中的任何位置的变化而发生变化。