编辑:大声笑。刚看到我迟到了10个月。
我刚刚碰到你在说什么。如果您使用 动态呈现每个选项卡中的内容ng-repeat
,则可以避免多次重新制作侧面板。
<div class="tabWrapper">
<uib-tabset>
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">
<div class="sidePanel">{{tab.sidepanel}}</div>
<div class="tabContent">{{tab.content}}</div>
</uib-tab>
</uib-tabset>
</div>
您也不需要弄乱绝对定位:
.sidePanel {
float: left;
width: 20%;
height: 10em;
border: 1px solid black;
border-top: none;
}
或者,如果您正在使用angular-ui-router
,您可以通过使用抽象状态来完成静态侧面板。
配置.js
$stateProvider
.state('root.tabs', {
abstract: true,
controller: 'TabsCtrl as vm',
templateUrl: 'templates/app-layout/tabs.tpl.html'
})
.state('root.tabs.view', {
url: '/tabsview',
templateUrl: 'templates/app-layout/sidepanel.tpl.html'
});
tabs.tpl.html
<div>
<uib-tabset>
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">
<div class="sidePanelContainer" ui-view></div>
<div class="tabContent">{{tab.content}}</div>
</uib-tab>
</uib-tabset>
</div>
sidepanel.tpl.html
<div class="sidePanel">
<input type="text" value="1234">
<input type="text" value="4321">
</div>
另请参阅:
使用抽象状态的目的是什么?
希望这可以帮助