ngChange在自定義指令中觸發兩次

附加自定義指令，它允許使用ng-change作爲屬性。ngChange在自定義指令中觸發兩次

問題是，當我在同一個視圖中使用它兩次時，我注意到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

來源

2015-05-12 Ramzy Abourafeh

對不起，包括！ –

你如何看待它以這種方式燃燒？我檢查了它，我認爲當你第二次點擊upper 1時它不會觸發（因爲它沒有改變）。 –

當您的自定義輸入指令「支持」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()。所以，在使用隔離範圍之前，可能在您的測試中發生了這種情況。

來源

2015-05-12 09:28:34

我遇到了同樣的問題，但無法在本網站或其他地方找到解決方案。就我而言，null是作爲附加函數調用中的值發送的。所以我的解決方法是在我的功能中處理null：

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

來源

2017-01-27 05:44:43 Wasimulator

ngChange在自定義指令中觸發兩次

回答

相關問題