是的,您可以在标签内呈现ui视图。诀窍是使用
ui-sref在
<tab-heading>控制状态/路由变化,并具有
ui-view以下
</tabset>。我敢肯定还有其他方法,但这就是我如何使用ui-router制作选项卡的方法。
编辑更新
以上原始建议是错误的,
ui-sref应在
<tab>
对chris-t的帽子提示,以进行正确的配置。
使用多个视图演示http://plnkr.co/edit/gXnFS3?p=preview
index.html
<tabset> <tab ui-sref="left"> <tab-heading > <a ui-sref-active="active">Left</a> </tab-heading> </tab> <tab ui-sref="right"> <tab-heading > <a ui-sref-active="active">Right</a> </tab-heading> </tab></tabset><div > <br> <div > <div ui-view="viewA"> <!--Here is the A content--> </div> </div> <div > <div ui-view="viewB"> <!--Here is the B content--> </div> </div></div>
app.js(UI路由器配置)
$stateProvider.state('left', { url: "/", views: { "viewA": { template: "Left Tab, index.viewA" }, "viewB": { template: 'Left Tab, index.viewB<br><a ui-sref=".list">Show List</a>' + '<div ui-view="viewB.list"></div>' }, "viewC": { template: 'Left Tab, index.viewC <div ui-view="viewC.list"></div>' } }}).state('left.list', { url: 'list', views: { "viewB.list": { template: '<h2>Nest list viewB</h2><ul>' + '<li ng-repeat="thing in tab1things">{{thing}}</li></ul>', controller: 'Tab1ViewBCtrl', data: {} }, "viewC.list": { template: 'Left Tab, list.viewC' } }})


