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

Question

我很感兴趣，内部的 angular.js 如何检测到该模型已更改，以及处理此更改的一般 Angular 工作流是什么。我的意思是，在我更改模块的某些部分之后，页面接下来真正发生了什么。

Answer 1

这是我的理解。如果我错了，请纠正我。这是两种方式的信息共享:)

如果您知道数据绑定(bind)背后的实际工作原理，那么数据绑定(bind)并不神奇。

为了使任何变量具有数据绑定(bind)功能，必须使用 $watch 方法对其进行注册。

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

只要调用 $scope.$digest，就会检查所有这些通过 $watch 绑定(bind)的数据。请注意，Angular 不会检查范围内的所有值，而只会检查那些使用 $watch 方法注册的值。如果模型未使用 watcher 注册，则不会对其进行检查。它比较旧值和新值以检查是否有任何变化。如果它发生变化，它将触发监听器函数(watcher 方法的第二个参数)。

您可能会问您没有使用 $watch 在范围内注册任何变量或调用 $digest 来检查更改，但仍然存在数据绑定(bind)。为什么？

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 指令实际上为 qty 和 cost 变量注册观察者，并在每次值发生变化时调用 $scope.$digest 而我们不知道。您可以创建自定义指令

忘了说，{{ }} 中的每个表达式也在编译阶段自动被监视。所以它会随着它的值在应用程序中的任何地方发生变化而变化。