Question

我有一个由两个相同部分组成的视图，只有内容不同。所以，基本上我想以某种方式为左右两个部分使用一个控制器和一个视图我做什么（用HTML格式）：

<div class="board_body">
    <div class="left_board" ng-controller="leftBoardController">
        <div ng-controller="panelController" ng-include="template"></div>
    </div>
    <div class="right_board" ng-controller="rightBoardController">
        <div ng-controller="panelController" ng-include="template"></div>
    </div>
</div>

我将所有初始化逻辑保留在左右控制器中，并使用panelController及其左右部分的视图。在这种情况下，可以共享panelController，因为它使用具有不同值的公共$ scope变量（在左侧和右侧控制器中创建变量，因此它们对panelCotrl可见）。

angular.module("radar.leftController", [])
.controller("leftController", function ($scope, ...) { 
    $scope.data = getSomeData();
}

angular.module("radar.rightController", [])
.controller("rightController", function ($scope, ...) { 
    $scope.data = getOtherData();
}

angular.module("radar.panelController", [])
.controller("panelController", function ($scope, ...) { 
    $scope.template = "somePath/panelView.html";
    // shared logic for left and right contrls goes here
}

在panelView.html中：

<div>data: {{data.length}}</div>

似乎从右边我可以改变左右两个变量，但是从左边我只能改变左变量（如预期的那样）。（我需要将左右两部分完全分开）。

那么，重用一个控制器（创建多个实例）的正确方法是什么？

Answer 1

执行此操作的正确方法是将directives与隔离范围一起使用。然后你的代码就像这样：

...
angular.module("radar.panel", [])
.directive("panel", function() {
   return {
    scope: {'panelData': '=' // Doubly bound to panel-data attribute},
    templateUrl: 'somePath/panelView.html'
    controller: function ($scope, ...) { 
      // shared logic for left and right contrls goes here
    }
  }
}

<div class="board_body">
    <div class="left_board" ng-controller="leftBoardController">
        <div panel panel-data="data"></div>
    </div>
    <div class="right_board" ng-controller="rightBoardController">
        <div panel panel-data="data"></div>
    </div>
</div>

Answer 2

使用Angular的controllerAs语法可以实现大量的控制器重用 - 请参阅Todd Motto的this文章。

但是，我认为更好的方法是在服务/工厂/提供商内部保持控制器之间的共享功能，并保持控制器的精益。

angular.js，javascript中的多个控制器实例

2 个答案: