角度触发随$ watch vs ng-change,ng-checked等而变化

Question

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

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

Answer 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是模特.

Answer 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'然后做东西'等繁琐的任务.

从性能角度来看,您只$watch需要担心一个表达式.

Answer 3

类似ng-change的指令用于数据绑定到DOM.$watch在您的JS代码中用于侦听更改.

当您需要让DOM受到范围更改的影响,或者需要对DOM进行更改(例如,字段选择)影响范围时,您将使用指令.

如果您需要通过范围更改(例如ajax请求)触发JavaScript操作,则可以$watch在控制器(或服务)中使用来监听更改.