您可以在共享相同视图的单独控制器中使用 ControllerAs 语法吗？

Question

问题：

能否在共享相同视图的单独控制器中使用 ControllerAs 语法？

即：(var vm = this)?

困境

我正在尝试消除 EsLinter 在我的控制台中生成的 linter 错误：

"Designated alias 'vm' is not assigned to 'this' consistent-this"

我想知道如何在控制器中使用：var vm = this 或将 Controller 设置为 vm（我两种都试过了，但都不行）

唯一有效的是控制器内的 $scope（如下所示）...每当我尝试应用 controller作为 controller.js 或 html div 中的语法 并将相关变量 (vm) 应用于 modal.html 中的内插表达式数据未呈现。

最佳做法是什么？

** 旁注： 我在将 ng-click 动作函数 绑定到基于控制器的视图时也遇到了问题...下面的示例不起作用（对于动作）——如果我更改{{::action}} 到 {{::action()}} 函数在加载时触发而不是在点击时触发：

示例modal.html：

<article>
    <h1>{{::title}}</h1>
    <p>{{::body}}</p>
    <button ng-click="{{::action}}">{{::button}}</button>
</article>

HTML拉进上面^

<div class="hide"
     ng-controller="ConfirmModalController"
     ng-include src="'/app/widgets/modals/modal.html'"></div>

<div class="hide"
     ng-controller="ErrorModalController"
     ng-include src="'/app/widgets/modals/modal.html'"></div>

示例控制器

错误控制器

angular
  .module('common.modal')
  .controller('ErrorModalController', ErrorModalController);

function ErrorModalController(modalService, $scope) {

  var vm = $scope;

  vm.title = 'There was an error with your request';

  vm.body = 'Please contact adminstrator regarding this error';

  vm.button = 'Dismiss';

  vm.action = function () {
    console.log("closing modals");
    modalService.closeAllModals();
  };

}

确认控制器

angular
  .module('common.modal')
  .controller('ConfirmModalController', ConfirmModalController);

function ConfirmModalController(modalService, $scope) {

  var vm = $scope;

  vm.title = 'Confirm Your Subscription';

  vm.body = '.99 per month will be billed to your account.';

  vm.button = 'Subscribe';

  vm.action = function () {
    console.log("confirming subscription");
    modalService.confirmSubscription();
  };

}

Answer 1

数据未呈现，因为您没有在引用中包含控制器。我看不到您在模板中加载控制器的位置，但是如果您使用 controllerAs 语法引用控制器，那么要引用它的属性，您必须使用该引用。 IOW，如果您将控制器加载为 foo，那么您的模板应该如下所示：

<article>
    <h1>{{::foo.title}}</h1>
    <p>{{::foo.body}}</p>
    <button ng-click="{{::foo.action()}}">{{::foo.button}}</button>
</article>

在您发布的代码中，您没有使用 controllerAs 语法。您需要使用 ng-controller="ConfirmModalController as vm" 加载它。在 JavaScript 和模板中引用它的方式之间没有直接关联。您甚至不必称它们为同一事物。

Answer 2

感谢@estus 为每种类型的模态创建一个指令的建议 - 现在可以使用 vm=this 正确呈现数据 ...

感谢@JC-Ford 告诉我如何将 {{::action}} 修复为 vm.action() 且不带括号 ...

** 旁注：（但是操作按钮仍然存在问题）

解决方案main.html

<confirm-modal></confirm-modal>

解决方案modal.html:

<article>
    <h1>{{::vm.title}}</h1>
    <p>{{::vm.body}}</p>
    <button ng-click="vm.action()">{{::vm.button}}</button>
</article>

解决方案确认-modal.directive.js（和控制器）

angular
  .module('common.modal')
  .controller('ConfirmModalController', ConfirmModalController)
  .directive('confirmModal', confirmModal);

/* @ngInject */
function confirmModal() {

  var directive = {
    templateUrl: 'app/widgets/modals/modal.html',
    restrict: 'E',
    controller: ConfirmModalController,
    controllerAs: 'vm',
    bindToController: true
  };

  return directive;
}

function ConfirmModalController(modalService) {

  var vm = this;

  vm.title = 'Confirm Your Subscription';

  vm.body = '.99 per month will be billed to your account.';

  vm.button = 'Subscribe';

  vm.action = function () {
    modalService.confirmSubscription();
  };

}

解决方法错误-modal.directive.js（和控制器）

angular
  .module('common.modal')
  .controller('ErrorModalController', ErrorModalController)
  .directive('errorModal', errorModal);

/* @ngInject */
function errorModal() {
  var directive = {
    templateUrl: 'app/widgets/modals/modal.html',
    restrict: 'E',
    controller: ErrorModalController,
    controllerAs: 'vm',
    bindToController: true
  };

  return directive;
}

function ErrorModalController(modalService) {

  var vm = this;

  vm.title = 'There was an error with your request';

  vm.body = 'Please contact administrator regarding this error';

  vm.button = 'Dismiss';

  vm.action = function () {
    modalService.closeAllModals();
  };
}

您可以在共享相同视图的单独控制器中使用 ControllerAs 语法吗？

Can you use ControllerAs syntax within separate Controllers that share the same view?

scope

controller

angularjs

angularjs-controlleras