对同一个 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

如果我理解这个问题，那么听起来您想使用 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' link 中的 html。您将需要在主 html 中放置一个 <div ng-view></div>，以便 Angular 知道您想要交换视图的位置。当您更改标签时，它将换出 html 并根据 url.

切换控制器

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

Answer 2

实际上我意识到在这种情况下我需要多个模型，而不是控制器。所以 view 是一样的，controller 是一样的，但是我添加了服务来存储和恢复我的 models 和选项卡开关 $rootScope.$broadcast('onTabChanged', index); 我只是换了相应的型号。

对同一个 html 文件有多个控制器

Having multiple controllers for very same html file

javascript

angularjs

angularjs-ng-include