1

问题：

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

即：（var vm = this）？

困境

我试图摆脱 EsLinter 生成的控制台中的 linter 错误：

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

在此处输入图像描述

我想知道如何在控制器中使用：var vm = this或将控制器设置为 vm（我都尝试过，但它不起作用）

唯一有效的是控制器内的$scope（如下所示）......每当我尝试将控制器应用为 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 = '$8.99 per month will be billed to your account.';

  vm.button = 'Subscribe';

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

}
4

2 回答 2

1

感谢您的建议@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>

解决方案 confirm-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 = '$8.99 per month will be billed to your account.';

  vm.button = 'Subscribe';

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

}

解决方案error-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();
  };
}
于 2017-09-26T22:12:12.247 回答
0

未呈现数据，因为您没有在引用中包含控制器。我看不到您在模板中加载控制器的位置，但如果您使用 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 和模板中引用它的方式之间没有直接关联。您甚至不必将它们称为相同的东西。

于 2017-09-26T17:19:44.187 回答