angularjs – Angular ui tab,每个选项卡都有单独的控制器

前端之家收集整理的这篇文章主要介绍了angularjs – Angular ui tab,每个选项卡都有单独的控制器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想制作一个bootstrap tabset,每个tab都有自己的控制器.任何人都可以指出我应该去哪个方向.

目前我已经制作了几个不同的控制器,我希望在tabset中使用它们,而不是将它们显示为不同的路径.

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

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

>使用包含选项卡和嵌套ui视图的视图创建抽象状态
>为每个选项卡创建子状态,每个选项卡都从抽象状态继承
>每个子状态都可以设置嵌套的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'
          }
        }
      });

猜你在找的Angularjs相关文章