角度触发器通过 $watch 与 ng-change、ng-checked 等进行更改答案

【问题标题】：angular trigger changes with $watch vs ng-change, ng-checked, etc角度触发器通过 $watch 与 ng-change、ng-checked 等进行更改
【发布时间】：2013-09-25 14:09:02
【问题描述】：

目前我们可以通过多种方式监控数据变化。我们可以使用$watch 触发模型更改，我们可以向元素添加指令并将一些操作绑定到它。

在很多情况下有点令人困惑，所以我很好奇，每个变体的优缺点是什么，我们什么时候应该使用$watch绑定，什么时候应该使用ng-change这样的指令？

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

$watch 和 ngChange 的用法完全不同：

假设您在作用域上定义了一个模型：

$scope.myModel = [
    {
        "foo":"bar"
    }
];

现在，如果您想在myModel 发生任何更改时执行某项操作，您可以使用$watch：

$scope.$watch("myModel", function(newValue, oldValue){
    // do something
});

ngChange 是一个指令，它会在用户更改输入时评估给定的表达式：

<select ng-model="selectedOption" ng-options="option for option in options" 
ng-change="myModel=selectedOption"></select>

简而言之，您通常会将ngChange 绑定到某个HTML 元素。而$watch 是针对模型的。

【讨论】：

但是 $watch("input", inputChanged, true) 也可以工作，并且会在您更改输入值时触发。
不同之处在于ng-change在值变化来自模型时不计算表达式，而$watch专门监听模型更新。
所以你的意思是如果将数据绑定到模型，然后将监视侦听器添加到该模型，然后将更改侦听器内部的模型-然后它将再次评估监视侦听器？

【解决方案2】：

ngChange 指令代码：

var ngChangeDirective = valueFn({
  require: 'ngModel',
  link: function(scope, element, attr, ctrl) {
    ctrl.$viewChangeListeners.push(function() {
      scope.$eval(attr.ngChange);
    });
  }
});

猜猜看，ngChange 需要来自ngModel 的控制器，并在视图更改时执行绑定表达式。

所以它就像一个帮手，让您免于执行 [$watch 'model' then do stuff] 之类的繁琐任务。

从性能角度来看，您不必担心$watch 表达式。

【讨论】：

最后一句是真的吗？ $viewChangeListeners 本身不像 $watch 吗？
是的，确实如此，更详细的解释可以参考这篇文章:) accelebrate.com/blog/…

【解决方案3】：

ng-change 之类的指令用于将数据绑定到 DOM。 $watch 在你的 JS 代码中用于监听变化。

当您需要让 DOM 受到范围更改的影响，或者需要 DOM 中的更改（例如字段选择）影响范围时，您可以使用指令。

如果您需要从范围更改触发 JavaScript 操作，例如 ajax 请求，那么您可以在控制器（或服务）中使用 $watch 来监听更改。

【讨论】：

但是如果你将元素绑定到模型，比如输入。然后当您更改输入值时 - 它会自动更改模型字段值。然后 $watch 监听器将被触发，你可以实现任何你想要的逻辑，而无需指导 dom 操作，只与模型交互。
是的，这正是指令的用途。指令处理 DOM，而控制器/服务中的 JS 代码可以处理其他事情。

【解决方案4】：

如果您想要双向数据绑定，请使用ng-model。这推动了从模型到视图以及从视图到模型的更改——两种方式。但是，如果您只想要从视图到模型的单向数据绑定，请使用ng-change。如果您想要从模型到视图的简单单向数据绑定，可以使用表达式{{ like_this }}。但是，如果您想更好地控制模型在视图中的呈现方式，或者如果您想将模型绑定到视图以外的其他东西，那么请使用$watch。

【讨论】：