Question

使用ng-change作为属性的附加自定义指令。

问题是，当我在同一视图中使用它两次时，我注意到bar方法触发了两次，我发现$viewChangeListeners存储控制器的相同方法两次的问题。注意：请注意，我可能使用两种不同的ng-change方法两次使用相同的指令

有任何人想知道解决这个问题吗？

HTML：

<my-directive ng-model="foo"  items="items" ng-change="bar1(foo)"></my-directive>
<my-directive ng-model="foo2" items="items" ng-change="bar2(foo2)"></my-directive>

指令：

template: '<div ng-repeat="item in items" ng-click="updateModel(item)">{{item}}</div>',
require: "ngModel",
scope : {
  items : "="
},
link: function(scope, element, attrs, ctrl){
  scope.updateModel = function(item)
  {
    ctrl.$setViewValue(item);
  }
  ctrl.$viewChangeListeners.push(function() {
    scope.$eval(attrs.ngChange);
  });
}

plunkr sample

试试这个，单击向上（1），然后单击向下（1），然后单击向上（1）。事件触发如下：bar1，bar2，bar1，bar2

Answer 1

当您的自定义输入指令＆＃34;支持＆＃34; ngModel - 也就是说它使用ngModel管道来设置视图值 - 它会自动获得支持使用ngModel的其他指令的好处，例如ng-required， ng-maxlength，和 ng-change。

因此，不需要以下：

ctrl.$viewChangeListeners.push(function() {
   scope.$eval(attrs.ngChange);
});

在您的特定示例中，它实际上不会两次触发bar1() / bar2()个处理程序，因为scope.$eval(attrs.ngChange)是在没有bar1()的隔离范围内进行评估的和bar2()。因此，在您使用隔离范围之前，可能是在您的测试中发生过这种情况。

Answer 2

我遇到了同样的问题，但无法在此网站或其他地方找到解决方案。在我的例子中，null被作为附加函数调用中的值发送。所以我的解决方法是在我的函数中处理null：

$scope.bar1 = function(foo){
  if(foo != null){
    //perform the task
  }
};

两次自定义指令中的ngChange

2 个答案: