Instancje wielu kontrolerów w angular.js, javascript

Question

Mam widok, który składa się z dwóch części, ale zawartość jest inna. Tak więc, w zasadzie chcę użyć jednego kontrolera i jednego widoku dla lewej i prawej części.
Co zrobić (w 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> 

trzymam całą logikę inicjującą w lewych i prawych kontrolerów i używać panelController i to widok na części lewej i prawej. W tym przypadku panelController może być współużytkowany, ponieważ używa wspólnych zmiennych $ scope, które mają różne wartości (vary są tworzone w lewym i prawym kontrolerze, dzięki czemu są widoczne dla paneluCotrl).

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 
} 

W panelView.html:

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

Wydaje się, że z prawej strony mogę zmienić zarówno w lewo i prawo Vars, ale z lewej strony mogę zmienić tylko lewe vars (zgodnie z oczekiwaniami). (Potrzebuję lewej i prawej części być całkowicie oddzielone).

Jaki jest zatem właściwy sposób ponownego użycia jednego kontrolera (tworzenie wielu instancji)?

Answer 1

Właściwym sposobem wykonania tej czynności jest użycie directives z odizolowanymi zakresami. Następnie Twój kod będzie wyglądać tak:

... 
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

można osiągnąć dużo kontrolera ponownego użycia za pomocą controllerAs składni kątowych - patrz this artykuł Todda motto.

Jednak myślę, że lepszym sposobem byłoby zachowanie wspólnej funkcjonalności pomiędzy kontrolerami wewnątrz usługi/fabryki/dostawcy i utrzymanie kontrolerów szczupłych.