javascript - 为 Angularjs 指令实现更改处理程序

Question

我正在尝试创建一个自定义指令，它提供与 input 控件类似的更改通知。使用输入控件，您可以执行以下操作:

<input type="text" ng-model="foo" ng-change="bar(a,b)">

在这种情况下，每次foo的值改变时，用ng-change指定的bar函数只会被调用一次。我创建了一个自定义指令，并且想添加相同类型的更改通知。

<div my-directive ng-model="foo" ng-change="bar(a,b)"></div>

我首先尝试将更改处理程序包含在作用域中，然后执行它，但是将其包含在作用域中会导致它在实例化时被调用 12 次，在更改时被调用 12 次，因为我相信这是正在评估属性。

return {
  templateUrl: '...',
  restrict: 'A',
  require: '^ngModel',
  scope: {
    ngModel: '=',
    ngChange: '='
  },
  link: function postLink(scope, element, attrs) {
    if(angular.isFunction(scope.ngChange) {
      scope.ngChange(); // bar is called 12 times
    }
  }
}

然后我查看了 Angular 源代码，发现它们评估了 input 上更改处理程序的属性值。我尝试这样做，但指定的函数似乎从未被调用。

return {
  templateUrl: '...',
  restrict: 'A',
  require: '^ngModel',
  scope: {
    ngModel: '='
  },
  link: function postLink(scope, element, attrs) {
    scope.$eval(attrs.ngChange);  // bar is never called
  }
}

执行此操作的正确方法是什么？

Answer 1

如果您想在每次模型更改时调用 ngChange，您可以监视模型并在监视回调中调用 ngChange。

Plunk here