Angular ui 选项卡，每个选项卡都有单独的控制器 [英] Angular ui tab with seperate controllers for each tab

问题描述

我想制作一个引导标签集，每个标签都有自己的控制器.谁能指点我该往哪个方向走.

I would like to make a bootstrap tabset with each tab having it's own controller. Can anyone point me in which direction I should go.

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

Currently I have made several difference controllers, which I would like to be used in a tabset instead of having them displayed as a different route.

我知道我可以通过让不同控制器模板中的标签集将给定的控制器标签显示为活动来伪造它，但我希望能够有一个带有多个子控制器的主 TabController(对于每个标签)

I know I could fake it by having the tabset in the difference controller templates displaying the given controllers tab as active, but I would like to be able to have a main TabController with several child controllers (for each tab)

推荐答案

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

If you are using angular ui router you can use nested states to do this.

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

• 每个子状态可以设置嵌套的ui-view的内容，并定义一个控制器

• Create an abstract state with a view that contains the tabs and a nested ui-view
• Create a child state for each of your tabs, each inheriting from the abstract state

• Each child state can set the content of the nested ui-view, and define a 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'
          }
        }
      });

这篇关于Angular ui 选项卡，每个选项卡都有单独的控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！