Istanze multiple del controllore in angular.js, javascript

Question

Ho una vista che consiste delle due stesse parti, solo il contenuto è diverso. Quindi, fondamentalmente voglio usare in qualche modo un controller e una vista per entrambe le parti sinistra e destra.
Quello che faccio (in 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> 

io continuo ogni logica di inizializzazione nei controllori a destra ea sinistra e utilizzare panelController ed è vista per le parti sinistra e destra. In questo caso panelController può essere condiviso perché utilizza variabili di $ scope comuni che hanno valori diversi (le variabili vengono create nei controller sinistro e destro in modo che siano visibili a 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 
} 

Nella panelView.html:

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

sembra che da destra posso cambiare sia Vars a destra ea sinistra, ma da sinistra posso solo cambiare i vars sinistra (come previsto). (Ho bisogno che le parti sinistra e destra siano completamente separate).

Quindi, qual è il modo corretto di riutilizzare un controller (creando più istanze)?

Answer 1

Il modo corretto per farlo sarebbe quello di utilizzare directives con ambiti isolati. Allora il vostro codice sarà in questo modo:

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

È possibile ottenere un sacco di controllo riutilizzo utilizzando la sintassi di controllerAs angolare - vedi this articolo di Todd Motto.

Tuttavia, penso che un modo migliore sarebbe quello di mantenere la funzionalità condivisa tra i controller all'interno di un servizio/fabbrica/fornitore e mantenere i controller inclinati.