Question

问题：

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

即：（var vm = this）？

DILEMMA

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

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

我想知道如何在控制器中使用 var vm = this 或将控制器设置为vm （我已尝试过两者兼而有之不起作用）

唯一可行的是控制器内的 $ scope （如下所示）...每当我尝试将 控制器应用为语法 在controller.js或html div中，将相关变量（vm）应用于modal.html内的插值表达式，数据不会被渲染。

最佳做法是什么？

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

示例modal.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>

HTML拉入上面^

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

}

确认控制器

{{1}}

Answer 1

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

感谢@ JC-Ford告诉我如何修复{{:: action}}到vm.action（）没有括号......

** SIDE注意:(但仍然存在操作按钮的问题）

解决方案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();
  };
}

Answer 2

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

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

2 个答案: