為什么Angular.js使用ng-change來調用我的函數，如何在每次更改時只調用一次？

Question

經過許多教程后，我正在構建我的第一個正確的angular.js應用程序。 我遇到了ngChange指令的問題。 每次用戶更改下拉列表的值時，我都會嘗試使用它來調用函數。 我發現它在頁面加載時多次調用該函數，並且每次選擇該選項時也會多次調用該函數。

我把這個jsfiddle放在一起，它展示了我遇到的問題。

我想知道為什么它會表現出這種行為，以及如何在每次選項更改時實現一個函數調用的預期結果，並且不會在頁面加載時調用change() 。 （這個第二個標准對我的應用程序不太重要，但我想知道如何抑制這種行為）。

我已經為那些能夠立即發現錯誤的人復制了以下代碼。

HTML

<body ng-app ng-controller="Controller">
<div>
    <h2>Number of changes: {{numOfChanges}}</h2>
    <select ng-change="{{change()}}" ng-model="currentSelection">
    <option ng-repeat="option in options">{{option}}</option>
    </select>
</div>
</body>

JavaScript的

Controller = function($scope) {
    $scope.numOfChanges = 0;
    $scope.change = function() {
        $scope.numOfChanges++;
    }
    $scope.options = ["do", "ray", "me", "far", "so", "la", "tee","dah"]
}

我知道這很可能是由於我對角度方法的不當使用/理解。 我很感激能夠解決這個小例子的所有缺點的答案。

Answer 1

ng-change中的任何內容都已被angular識別，因此您無需將其包裝在{{}}中。 只需ng-change="change()" 。

將它包裝在大括號中將導致角度在頁面加載時評估它以及它更新視圖的任何時間，因此它會多次觸發。

Answer 2

從ng-change()代碼中刪除{{ }}

<select ng-change="change()" ng-model="currentSelection">

{}是在綁定的情況下，因此您正在觸發更改事件，因此不存在綁定。

你最好看看這個ngChange文檔

更新小提琴

Answer 3

DKM和jonnyynnoj的答案已經解釋了為了使ng-change工作你必須做些什么。

在您的示例中，更改偵聽器觸發10次的原因是因為“摘要”周期更新10次然后如此處所述中止： http ：//docs.angularjs.org/api/ng。$ rootScope.Scope＃ $摘要

$ digest（）由AngularJS直接調用。 以下是解釋它的文檔的解釋：

處理當前范圍的所有觀察者及其子女。 因為觀察者的監聽器可以改變模型，所以$ digest（）不斷調用監視器，直到不再有監聽器被觸發為止。 這意味着可以進入無限循環。 此函數將拋出“超出最大迭代限制”。 如果迭代次數超過10次。

在javascript開發人員控制台中，您還可以看到您的示例拋出以下錯誤：錯誤：達到10 $ digest（）迭代。 中止！

為什么Angular.js使用ng-change來調用我的函數，如何在每次更改時只調用一次？

問題描述

HTML

JavaScript的

3 個解決方案

解決方案1
5 已采納 2013-07-22 10:57:27

解決方案2
1 2013-07-22 10:58:06

解決方案3
1 2013-07-22 11:09:07

為什么Angular.js使用ng-change來調用我的函數，如何在每次更改時只調用一次？

問題描述

HTML

JavaScript的

3 個解決方案

解決方案1 5 已采納 2013-07-22 10:57:27

解決方案2 1 2013-07-22 10:58:06

解決方案3 1 2013-07-22 11:09:07

解決方案1
5 已采納 2013-07-22 10:57:27

解決方案2
1 2013-07-22 10:58:06

解決方案3
1 2013-07-22 11:09:07