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

如果我理解这个问题听起来你想要使用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'
      });
  }]);

当您更改视图时，它将使用位于“templateUrl”链接中的html替换部分html页面。您需要在主html中放置<div ng-view></div>，以便Angular知道您想要交换视图的位置。当您更改标签时，它将换出html并根据网址切换控制器。

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

Answer 2

实际上我意识到在这种情况下我需要多个模型，而不是控制器。所以 view 是相同的， controller 是相同的，但我已经添加了服务来存储和恢复我的模型和tab选项卡 $ rootScope。$ broadcast（＆＃39; onTabChanged＆＃39;，index）; 我只是换成相应的模型。

拥有多个控制器用于完全相同的html文件

2 个答案: