Question

现在我正在使用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”无效。所以我无法确定是否有可能切换到特定网址上的状态。或者在routeProvider中更改特定URL的状态？

Answer 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或更高版本。

如何在angularJS中制作标签有单独的控制器？

1 个答案: