在帶有“ Controller As”語法的AngularJS中使用ng-change

Question

我試圖避免在控制器函數中使用$ scope，而是選擇使用

var viewModel = this;

使用“ controller as” viewModel語法。 我的問題是我需要使用ng-change來調用控制器中的函數，但是盡管我能夠從服務訪問數據，但無法調用函數。

//Controller
(function () {
'use strict';

angular
    .module('app')
    .controller('GeneralSettingsController', GeneralSettingsController);

GeneralSettingsController.$inject = ['SimulationService'];
function GeneralSettingsController(SimulationService) {
    var viewModel = this;
    viewModel.SimulationService = SimulationService;
    viewModel.setSimulationPeriod = setSimulationPeriod;

    function setSimulationPeriod() {
        console.log("Entered local setSimulationPeriod");
        viewModel.SimulationService.setSimulationPeriod();
    }
}
})();

在定義控制器和controllerAs的指令中實例化控制器：'viewModel'

我的html看起來像這樣：

<div class="col-xs-2">
    <input type="text" class="form-control" id="startyear" name="startyear" placeholder="start year"
                       autocomplete="off" value="2017" maxlength="4"
                       ng-model="viewModel.SimulationService.data.simulationPeriodStart" ng-change="viewModel.setSimulationPeriod">
</div>

當我使用$ scope而不是引用控制器時，我可以稱其正常，但是我覺得這不是理想的選擇。 我希望有一種方法可以通過ng-change調用仍然使用viewModel的函數。

Answer 1

角度表達式

您沒有在調用該函數。 而是嘗試：

 <input ng-change="viewModel.setSimulationPeriod()">

注意函數末尾的（）。 與其他大多數角度指令一樣，Ng-change也使用表達式，這意味着它們實際上是在嘗試執行JavaScript的子集。 在這種情況下，當您只是傳遞對vm函數的引用時，它只是對其求值而不是執行它。

分配順序

另外，在定義要設置它的函數之前，先定義viewModel函數。 將函數聲明移到代碼部分的上方，將其分配給viewModel。

代替這個

viewModel.setSimulationPeriod = setSimulationPeriod;

function setSimulationPeriod() {
    console.log("Entered local setSimulationPeriod");
    viewModel.SimulationService.setSimulationPeriod();
}

像這樣重新排序

function setSimulationPeriod() {
    console.log("Entered local setSimulationPeriod");
    viewModel.SimulationService.setSimulationPeriod();
}

viewModel.setSimulationPeriod = setSimulationPeriod;

Answer 2

jusopi是正確的。 我的控制器未正確接線。 問題是我在更高范圍內有另一個活動的控制器，該控制器也設置為controllerAs：viewModel。 這導致我引用了不存在該功能的錯誤控制器。 一旦給這個控制器起了一個唯一的名字，一切都會順利進行，這就是為什么它適用於$ scope。