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

现在我正在使用routeProvider在不同的视图之间切换，效果非常好。但现在我想创建一个视图，其中包含4个不同的选项卡，应该包含4个不同的控制器。我在这里读到，这可以通过stateProvider实现：

这是我的密码：

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的默认设置为send over to work，因为我的routeprovider在默认情况下发送到“/”，这使得“/tabs”无效。所以，我不能确切地知道是否有可能切换到特定url上的状态。或者在routeProvider中更改特定URL上的状态？

我不能确切地告诉您所提供的代码有什么问题，但我使用的Angular UI Router与您描述的用例相同，它对我有效。以下是我如何配置它以及它与您的配置的不同之处：

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

我使用$urlRouterProvider和“否则”语句来指定默认URL：

$urlRouterProvider.otherwise("/home");

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

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

下面是一个子状态的示例（除了状态名为parent.child格式，您已经在代码中使用了该格式；我添加了一个resolve块，但是您也可以在父状态上使用它）：

另外，我正在使用Angular UI路由器的0.2.8版和Angular UI路由器的1.2.9版。我认为这适用于Angular 1.2.0或更高版本

$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);
        }
    }
});