Question

我想制作一个bootstrap tabset，每个tab都有自己的控制器。任何人都可以指出我应该朝哪个方向前进。

目前我已经制作了几个不同的控制器，我想在一个标签集中使用它，而不是将它们显示为不同的路径。

我知道我可以通过将差异控制器模板中的tabset显示给定的控制器选项卡作为活动来伪造它，但我希望能够有一个带有多个子控制器的主TabController（对于每个选项卡）

Answer 1

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

使用包含选项卡和嵌套ui-view
为每个选项卡创建子状态，每个选项卡都继承自抽象状态

每个子状态都可以设置嵌套的ui视图的内容，并定义一个控制器

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

Answer 2

为什么不在每个拥有它自己的控制器的标签上放置指令？如果您使用的是1.x.通过指令而不是标签

分隔您的代码

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

2 个答案: