Наличие нескольких контроллеров для очень же 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), поэтому, когда я переключаю вкладки, он сохраняет данные и фрагменты в каждом из них. Является ли это возможным?

Спасибо заранее!

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 страницы с HTML, расположенным в ссылке «templateUrl». Вам нужно будет положить <div ng-view></div> в свой основной html, чтобы Angular знал, где вы хотите поменять местами. Когда вы меняете теги, он заменяет html и переключает контроллер на основе URL-адреса.

Вы можете обратиться к этой обучающей программе для получения дополнительной информации http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/