javascript - angular.js、javascript 中的多个 Controller 实例

Question

我有一个 View 由两个相同的部分组成，只是内容不同。所以，基本上我想以某种方式为左右部分使用一个 Controller 和一个 View 。
我做什么(在 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>

我将所有初始化逻辑保留在左右 Controller 中，并使用 panelController 及其左右部分的 View 。在这种情况下，panelController 可以共享，因为它使用具有不同值的公共(public) $scope 变量(在左右 Controller 中创建变量，因此它们对 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>

似乎从右边我可以更改左右变量，但从左边我只能更改左边的变量(如预期的那样)。 (我需要左右部分完全分开)。

那么，重用一个 Controller (创建多个实例)的正确方法是什么？

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>