javascript - 在 AngularJS 中使用 ng-change 和 "Controller As"语法

Question

我试图避免在我的 Controller 函数中使用 $scope，而是选择使用

var viewModel = this;

使用“ Controller 作为”viewModel 语法。我的问题是我需要使用 ng-change 来调用 Controller 中的函数，但是虽然我能够从服务访问数据，但我无法调用函数。

//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();
    }
}
})();

Controller 正在定义 Controller 和 Controller 的指令中实例化:'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 而不是引用 Controller 时，我能够调用一切正常，但我觉得这并不理想。我希望有一种方法可以通过 ng-change 调用仍然使用 viewModel 的函数。

Answer 1

Angular 表达式

您没有调用该函数。相反，请尝试:

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

请注意函数末尾的 ()。 Ng-change 与大多数其他 Angular 指令一样使用表达式，这意味着它们实际上是在尝试执行 JavaScript 的子集。在这种情况下，当您刚刚传递对虚拟机函数的引用时，它只是对其进行评估而不是执行它。

分配顺序

此外，您在定义要设置的函数之前，已经定义了 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;