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

Using ng-change in AngularJS with "Controller As" syntax

本文关键字：Controller As 语法 ng-change AngularJS      更新时间：2023-09-26

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

var viewModel = this;

使用"控制器作为"视图模型语法。我的问题是我需要使用 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而不是引用控制器时，我能够称事情很好，但我觉得这并不理想。我希望有一种方法可以调用仍然使用 viewModel 的 ng-change 函数。

角度表达式

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

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

请注意函数末尾的 （）。 Ng-change，像大多数其他角度指令一样使用表达式，这意味着它们实际上是在尝试执行JavaScript的一个子集。在这种情况下，当你刚刚传递对 vm 函数的引用时，它只是对其进行评估，而不是执行它。

分配顺序

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

Jusopi是对的。我的控制器未正确连接。问题是我在更高的范围内激活了另一个控制器，该控制器也设置为控制器As：viewModel。这导致我在函数不存在的情况下引用了错误的控制器。一旦我给这个控制器一个独特的名称，一切都很顺利，这就是它适用于$scope的原因。

相关文章：