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

Question

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

Answer 1

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

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

为了使任何变量具有数据绑定功能，必须使用$ 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每当值发生变化时我们都不知道。 您可以创建自定义指令

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