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

控制器正在一个定义控制器和控制器的指令中实例化：'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。

使用AngularJS中的ng-change和“Controller As”语法

2 个答案:

角度表达式

作业顺序