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

Question

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

Angular ui 选项卡，每个选项卡都有单独的控制器

这是我的代码：

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 的状态？

Answer 1

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

1. 我根本不使用 $routeProvider （没有你的 $routeProvider.when 语句）。我很确定您不应该使用 $routeProvider，因为您使用的是 $stateProvider。

2. 我使用带有“否则”语句的 $urlRouterProvider 来指定默认 URL：

   $urlRouterProvider.otherwise("/home");
   

3. 我对 $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 或更高版本。