如何使 angularJS 中的选项卡具有单独的控制器？答案

【问题标题】：How to make tabs in angularJS have separate controllers?如何使 angularJS 中的选项卡具有单独的控制器？
【发布时间】：2014-03-03 23:00:36
【问题描述】：

现在我正在使用 routeProvider 在视图之间进行切换，效果很棒。但现在我想创建一个包含 4 个不同选项卡的视图，这些选项卡应该包含 4 个不同的控制器。我在这里读到它可以用 stateProvider 完成：

Angular ui tab with seperate controllers for each tab

这是我的代码：

var WorkerApp = angular.module("WorkerApp", ["ngRoute", 'ngCookies', "ui.bootstrap", "ngGrid", 'ngAnimate', 'ui.router']).config(function ($routeProvider, $stateProvider) {
    $routeProvider.
        when('/login', {
            templateUrl: 'Home/Template/login', resolve: LoginCtrl.resolve
        })
        .when('/register', { templateUrl: 'Home/Template/register', resolve: RegisterCtrl.resolve  })
        .when('/', { templateUrl: 'Home/Template/main', resolve: MainCtrl.resolve })
        .when('/profile', { templateUrl: 'Home/Template/profile', controller: "ProfileController" })
        .when('/contact', { templateUrl: 'Home/Template/contact', controller: "ContactController" })


    $stateProvider.state('tabs', {
        abstract: true,
        url: '/profile',
        views: {
            "tabs": {
                controller: "ProfileController",
                templateUrl: 'Home/Template/profile'
            }
        }
    }).state('tabs.tab1', {
        url: '/profile',  //make this the default tab
          views: {
              "tabContent": {
                  controller: "ProfileController",
                  templateUrl: 'Home/Template/profile'
              }
          }
      })
      .state('tabs.tab2', {
          url: '/tab2',
          views: {
              "tabContent": {
                  controller: 'Tab2Ctrl',
                  templateUrl: 'tab2.html'
              }
          }
      });


});

但我无法让它真正工作，因为 routeprovider 的默认设置被设置为发送工作，因为我的 routeprovider 默认发送到“/”，这使得“/tabs”无效。所以我无法确定是否可以切换到特定 url 上的状态。或者更改 routeProvider 中特定 URL 的状态？

【问题讨论】：

标签： angularjs angular-ui-router angular-routing route-provider

【解决方案1】：

我不能确切地告诉你你提供的代码有什么问题，但我正在使用 Angular UI-Router 和你描述的相同用例，它对我有用。以下是我的配置方式以及它与您的配置有何不同：

我根本不使用 $routeProvider （没有你的 $routeProvider.when 语句）。我很确定您不应该使用 $routeProvider，因为您使用的是 $stateProvider。
我有一个使用 $urlRouterProvider 和一个 'otherwise' 语句来指定默认 URL：
```
$urlRouterProvider.otherwise("/home");
```

我对 $stateProvider.state 的调用与您的调用略有不同。这是选项卡的父视图：

$stateProvider.state('configure', {
    url: "/configure",
    templateUrl: 'app/configure/configure.tpl.html',
    controller: 'ConfigureCtrl'
});

这是子状态的一个示例（除了状态名称是 parent.child 格式外，其他情况完全相同；我添加了一个解析块，但您也可以在父级上使用它）：

$stateProvider.state('configure.student', {
    url: "/student",
    templateUrl: 'app/configure/student/configure.student.tpl.html',
    controller: 'ConfigureStudentCtrl',
    resolve: {
        storedClassCode: function($q, user, configureService) {
            return configureService.loadMyPromise($q, user);
        }
    }
});

另外，我使用的是 Angular UI-Router 0.2.8 版和 Angular 1.2.9 版。我认为这适用于任何版本的 Angular 1.2.0 或更高版本。

【讨论】：