Question

说我有以下控制器：

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之外，模板中几乎所有内容都保持不变。

Answer 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注入控制器，以便可以访问＆＃34;控制器＆＃34 ;本身。

因此控制器中的main.hello看起来像$scope.main.hello。

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

1 个答案: