有多個控制器非常相同的HTML文件

Question

希望你能幫助我這一個：

HTML：

<div role="tabpanel" ng-controller="tabController"> 
     <ul class="nav nav-pills nav-tabs" role="tablist"> 
      <li role="presentation" ng-repeat="tab in tabs" ng-click="selectTab($index)" ng-class="{'active':selectedTab == $index}"> 
       <a data-target="#tab" aria-controls="home" role="tab" data-toggle="tab">Tab {{tab.id}} <span ng-click="deleteTab($index)" class="glyphicon glyphicon-remove"></span></a> 
      </li> 
      <li role="presentation" class="nav-pills" ng-click="addTab()"> 
       <a aria-controls="home" role="tab" data-toggle="tab">(+)</a> 
      </li> 
     </ul> 
     <content ng-hide="counter === 0" ng-include="tabs[selectedTab].content"> 
     </content> 
    </div> 

JS：

angular.module('App') 
.controller('tabController', function ($scope) { 
    /** holds tabs, we will perform repeat on this **/ 
    $scope.tabs = []; 

    // ContollerS for this => <content ng-hide="counter === 0" ng-include="tabs[selectedTab].content"> 
    $scope.currentTabController = null; 

    // Hold controllers here; 
    $scope.tabControllersList = []; 

    $scope.counter = 0; 
    /** Function to add a new tab **/ 
    $scope.addTab = function() { 
     $scope.counter++; 
    var tabController = new TabController(); 
    $scope.tabControllersList.push(tabController); 
     $scope.tabs.push({ id: $scope.counter, content: tabController }); 
     $scope.selectedTab = $scope.tabs.length - 1; //set the newly added tab active. 
    } 

    /** Function to delete a tab **/ 
    $scope.deleteTab = function (index) { 
     $scope.tabs.splice(index, 1); //remove the object from the array based on index 
    } 

    $scope.selectedTab = 0; //set selected tab to the 1st by default. 

    /** Function to set selectedTab **/ 
    $scope.selectTab = function (index) { 
    // Add controller with all data and state. 
    $scope.currentTabController = $scope.tabControllersList[index]; 
     $scope.selectedTab = index; 
    } 
}); 

所以我希望有一個單獨的控制器對於每個選項卡（選項卡的模板相同 - test.html），因此當切換選項卡時，它將保留每個選項卡中的數據和chages。可能嗎？

預先感謝您！

Answer 1

其實我意識到，在這種情況下，我需要多車型，不控制器。所以觀點是一樣的，控制器是一樣的，但我已經增值服務來存儲和恢復我模型和標籤開關 $ rootScope $廣播（「onTabChanged」，索引）。 我只是交換到相應的模型。

Answer 2

如果我理解這個問題，它聽起來像你想要使用routeProvider。在app.js列出像這樣的路線：

var app= angular.module('app', [ 
    'ngRoute', 
]); 
app.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/presentation', { 
     templateUrl: 'templates/presentation.html', 
     controller: 'presentationCtrl' 
     }). 
     when('/test', { 
     templateUrl: 'templates/test.html', 
     controller: 'testCtrl' 
     }). 
     otherwise({ 
     redirectTo: '/presentation' 
     }); 
    }]); 

當您更改視圖將換出你的HTML頁面的一部分與位於「templateUrl」鏈接的HTML。您需要將<div ng-view></div>放入您的主html中，以便Angular知道您想要將視圖換出的位置。當你改變標籤時，它會換出html並根據url切換控制器。

您可以參考本教程以獲取更多信息http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/