angular.js中的多個控制器實例，javascript

我有一個由兩個相同部分組成的視圖，只有內容不同。所以，基本上我想以某種方式爲左右兩部分使用一個控制器和一個視圖。
我這樣做（在HTML）什麼：angular.js中的多個控制器實例，javascript

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

似乎從右邊我可以改變左，右瓦爾，但是從左邊我只能改變左瓦爾（如預期）。（我需要將左右部分完全分開）。

那麼，重用一個控制器（創建多個實例）的正確方法是什麼？

來源

2013-07-30 Aleksei Chepovoi

真正快速地看着它，你在做什麼應該工作。當你說從右側可以改變左右兩個變量時，你是什麼意思？你能在plunkr上發佈一個更完整的例子嗎？ – dtabuenc

正確的做法是將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>

來源

2013-11-25 22:06:43 codebreach

可以使用角的controllerAs語法實現很多控制器再利用的 - 見this文章託德座右銘。

但是，我認爲更好的方法是保持服務器/工廠/提供者內的控制器之間的共享功能，並保持控制器精簡。

來源

2015-01-15 18:27:08 nickeddy

嗨，這個問題在一年多以前被問過））現在我們有了控制器A，即使沒有它，我們也可以重新使用控制器/模板。這並不壞，它節省了很多代碼行，例如在我當前的項目中，我們在7個地方重複使用了一個控制器/模板（我的意思是路徑不同）。關於這篇文章中的代碼是的，最好爲每個面板配置不同的控制器，並通過服務共享數據。現在我只會使用一個控制器，並避免ng-include。我需要關閉這個問題） –

angular.js中的多個控制器實例，javascript

回答

相關問題