如何允许多个控制器使用一个带有 controllerAs 语法的模板？答案

【问题标题】：How can I allow multiple controllers to use one template with controllerAs syntax?如何允许多个控制器使用一个带有 controllerAs 语法的模板？
【发布时间】：2016-04-18 21:23:53
【问题描述】：

假设我有以下控制器：

function MainController() {
  this.hello = function() {
    // does stuff
  }
}

function AnotherController() {
  this.hello = function() {
    // does other stuff
  }
}

其中，MainController 的 controllerAs 设置为 mainController，AnotherController 的 controllerAs 设置为 anotherController。现在说我有以下模板：

<div ng-click="mainController.hello()"></div>

是否可以允许AnotherController 也使用此模板？我怎样才能做到这一点？

编辑** 为了澄清，我有两个不同的视图调用这个模板。每当主视图调用模板时，我希望模板是

<div ng-click="mainController.hello()"></div>

但是当其他模板调用它时，我希望它是

<div ng-click="anotherController.hello()"></div>

我不想有两个模板，因为除了 ng-click 之外，模板中的几乎所有内容都保持不变。

【问题讨论】：

标签： angularjs

【解决方案1】：

绝对是！！！ controllerAs 语法很棒，因为在选择从应用程序中的某些控制器中提取哪些变量时，它提供了更多的清晰度和控制力。

在您的控制器定义中：

var app = angular.module('AngularApplication', []);

app.controller('MainAppController', [MainAppControllerFn])
   .controller('AnotherController', [AnotherControllerFn])

function MainAppControllerFn($scope) {
  this.array = [1, 2, 3, 4, 5, 6];
  this.hello = "World";
}

function AnotherControllerFn() {
  this.hello = function() {
    return "Hello";
  }
}

在您的模板中：

<body ng-app="AngularApplication">
  <div class="container" ng-controller="MainAppController as main" bindToController="true">
    {{main.hello}}
    <div class="container" ng-controller="AnotherController as another" bindToController="true">
      {{another.hello()}}
      {{main.hello}}
    </div>
  </div>
</body>

我有一个codepen here that you can reference。

要记住的一点是，如果您想从您的子控制器访问父控制器，您需要将scope 注入您的控制器，以便您可以访问“控制器”本身。

所以控制器中的main.hello 看起来像$scope.main.hello。

【讨论】：

真的很有趣！我从来没有想过使用这样的控制器。如果您采用“一切都是指令”的方法，您会希望控制器尽可能私有，或者我认为。
是的，我在这里展示的示例在我的代码中实现并不像大多数时候使用具有隔离范围的指令/控制器/组件那样常见。但是，当您不在这种情况下时，这可能非常有用。更不用说你是否正确命名它们，而不是所有“VM”，它使代码更易于维护。
这真的很有趣，我绝对不知道，但我认为这不是我想要的。问题在于我不够具体。说我有两种观点。一个主视图和另一个视图。这两个视图都使用相同的模板，但主视图使用 MainController，另一个视图使用 AnotherController。同时，我使用 contollerAs 语法，所以在构建另一个控制器之前，我有 MainController，这解释了为什么我在 div 中有 mainController.hello()。
现在我想要它，这样如果我从主视图调用此模板，它会执行
.
你认为你可以制作一个 plunkr 或 codepen 来描述这个吗？你可以 fork 我的已经设置 Angular 的 codepen。