对每个选项卡单独的控制器角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)
推荐答案
如果您使用的是棱角分明的UI路由器可以使用嵌套的状态来做到这一点。
If you are using angular ui router you can use nested states to do this.
- 创建与包含标签和嵌套的用户界面视图 视图中的一个抽象状态
- 为每个标签页创建一个孩子的状态,每一个从抽象继承状态
-
每个子状态可以设置嵌套UI视图的内容,并定义一个控制器
- 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'
}
}
});
这篇关于对每个选项卡单独的控制器角UI选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!