如何.js检测模型已更改

how angular.js detect that model was changed

本文关键字：模型 js 检测 如何      更新时间：2023-09-26

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

这是我

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

如果您知道数据绑定实际上是如何在后面工作的，那么它就不是魔法。

为了使任何变量具有数据绑定功能，必须使用 $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。您可以创建自定义指令

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

相关文章：