Angular JS：獲取ng-change的ng-model

Question

我有以下HTML

<select ng-model="country" ng-options="c.name for c in countries" ng-change="filterByCountry"></select>

這是由以下對象和國家列表提供的

$scope.countries = [{name:Afeganistão, country:AF}, {name:África do Sul, country:ZA}, name:Albânia, country:AL}, {name:Alemanha, country:DE}, {name:Andorra, country:AD} ...];

當我更改我的下拉值時，我期望在filterByCountry函數內更新我的模型（$ scope.country），但事實並非如此。 我在這里錯過了什么？

Answer 1

在實際更新ng-model之前觸發ng-change處理程序。 如果你想filterByCountry將每次發射$scope.country變化（而不是僅僅在下拉菜單的變化），你應該使用，而不是以下內容：

$scope.$watch('country', filterByCountry);

我總是發現在可能的情況下對$scope更改而不是DOM事件做出反應更有用。

Answer 2

對於來到這里的其他人來說，實際上在設置模型值后調用ng-change 。

為什么？
讓我們看看它何時被調用。 從角度源代碼中 ， ng-change只是一個帶有此指令定義對象（DDO）的屬性指令。

{
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {
      ctrl.$viewChangeListeners.push(function() {
        scope.$eval(attr.ngChange);
      });
    }
}

由此我們看到ng-change指令非常簡單。 所有ng-change='<expr>'都會在$viewChangeListeners的末尾添加一個函數，該函數通過$ scope。$ eval計算<expr> 。

好的...那么什么時候調用ViewChangeListeners？

好吧，如果我們查看ngModel.NgModelController的文檔：

新值將應用於$ modelValue，然后應用於ng-model屬性中指定的表達式。 最后，調用$ viewChangeListeners列表中的所有已注冊的更改偵聽器 。

因此， 在將值應用於$modelValue 之后 ，將調用$modelValue 。 因此，在設置模型之后將調用回調。

另請注意，此行為在所有版本的角度中都相同。 自v1.2以來， ng-change的定義沒有改變。

Answer 3

正如詹姆斯勞森所指出的，

在設置模型值后實際調用ng-change。

如果你還在問

現在我為什么看到相反的行為？

然后你應該知道$ scope是繼承自其父類的原型，如果你的范圍變量只是一個簡單的類型（字符串，布爾等等），那么它將在子范圍內被覆蓋為由ng-設置的值。模型指令

要查看子范圍的創建位置（在哪個DOM元素上），您可以打開開發工具並在元素上查找class="ng-scope"