angularjs - Angular ui 选项卡，每个选项卡都有单独的 Controller

Question

我想制作一个 Bootstrap 标签集，每个标签都有自己的 Controller 。谁能指出我应该往哪个方向走。

目前我已经制作了几个不同的 Controller ，我想在标签集中使用它们而不是让它们显示为不同的路线。

我知道我可以通过让差异 Controller 模板中的选项卡集显示给定的 Controller 选项卡作为事件来伪造它，但我希望能够拥有一个带有多个子 Controller 的主 TabController(对于每个选项卡)

Answer 1

如果您使用的是 Angular ui 路由器，您可以使用嵌套状态来执行此操作。

使用包含选项卡和嵌套 ui View 的 View 创建抽象状态

为每个选项卡创建一个子状态，每个都继承自抽象状态

每个子状态都可以设置嵌套的ui-view的内容，并定义一个 Controller

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