在
angularjs项目中,我使用uib-tabset指令来显示选项卡.我想显示所有标签共有的左侧面板.所以我必须在uib-tabset指令之前或之后添加一个div.
在生成的结构中,我想将选项卡包含在选项卡内(可视化)：
使用uib-tabsets,生成的结构如下所示：
<panel> <tabs-headings> <tabs-bodies>
使用这种结构,我找到的唯一方法是编辑css并使用位置属性(左/上)进行播放,以便将标题移动到侧面板的顶部,但我发现这有风险.
另一种方法是复制每个选项卡内的面板代码,但我发现这也很糟糕.
相反,我想生成这个,所以创建css会更容易：
<tabs-heading> <panel> <tabs-bodies>
有没有一种简单的方法来实现这种行为？
谢谢
解决方法
编辑：哈哈.刚看到我迟到了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,则可以使用抽象状态来完成静态侧面板.
config.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>
也可以看看：
what is the purpose of use abstract state?
希望这可以帮助
