5

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

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

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

4

2 回答 2

0

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

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

于 2015-01-15T18:27:08.600 回答
0

正确的方法是使用具有隔离作用域的指令。然后您的代码将如下所示：

...
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>
于 2013-11-25T22:06:43.130 回答