Question

假设您想要在$scope的属性发生变化时执行某些操作。并且说这个属性绑定到input字段。使用$watch与使用ngChange相比有哪些优点/缺点？

HTML

<input ng-model="foo" ng-change="increment()">
<p>foo: {{foo}}</p>

<!-- I want to do something when foo changes.
     In this case keep track of the number of changes. -->
<p>fooChangeCount: {{fooChangeCount}}</p>

JS

// Option 1: $watch
$scope.$watch('foo', function() {
  $scope.fooChangeCount++;
});

// Option 2: ngChange
$scope.fooChangeCount = 0;
$scope.increment = function() {
  $scope.fooChangeCount++;
};

http://plnkr.co/edit/4xJWpU6AN9HIp0OSZjgm?p=preview

我知道您有时需要使用$watch（如果您要观看的值不是绑定到输入字段）。我理解有时你需要使用ngChange（当你想要做一些事情来响应输入的变化，但不一定是为了响应范围属性的变化）。

然而，在这种情况下，两者都完成了同样的事情。

我的想法：

ngChange看起来更干净，更容易理解发生了什么。
$watch似乎可能稍快一点，但可能微不足道。使用ngChange，我认为Angular必须在编译阶段做一些额外的工作来设置事件监听器，并且可能额外的事件监听器会降低速度。无论您是否使用ngChange，摘要周期都会根据更改运行，因此您有机会收听某些内容并调用函数以响应更改。

Answer 1

底线 - 你可以用$ watch来实现你可以用ng-change实现的每一件事，但反之亦然。

用途：

ngChange - 绑定到HTML元素

$ watch - 观察范围的模型对象（包括HTML对象模型）

我的经验法则 - 如果你可以使用ng-change使用它来匹配你的场景，否则使用$ watch

为什么你不应该使用$ watch？

效率低下 - 为$ digest增加复杂性
很难有效测试
不干净

Answer 2

你大部分都是对的。 ng-change非常特定于DOM，用于在更改事件触发DOM元素时评估表达式。

$watch但是，它是一个监视您的视图模型或$scope的低级（并且更通用）实用程序。因此，每次用户键入一个键时，您的监视功能都会触发（在输入示例中）。

相比之下，一个人听DOM事件，另一个人看你的数据。

Answer 3

$ watch会增加$摘要的复杂性，从而降低效率。在你的情况下，改变它是一个更清洁，更容易的解决方案...

字体：http://www.benlesh.com/2013/10/title.html

$ watch vs. ngChange

3 个答案: