5

2 つの同じ部分で構成されるビューがありますが、コンテンツのみが異なります。というわけで、基本的にはコントローラー1つとビュー1つを左右両方でなんとか使いたいと思っています。
私がすること（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 を使用します。これは左右のパーツのビューです。この場合、異なる値を持つ共通の $scope 変数を使用するため、panelController を共有できます (vars は左右のコントローラーで作成されるため、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>

右からは左右の両方の変数を変更できるようですが、左からは左の変数しか変更できません(予想どおり)。（左右のパーツを完全に分離する必要があります）。

では、1 つのコントローラーを再利用する (複数のインスタンスを作成する) 適切な方法は何ですか?

4

2 に答える 2

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 に答える