在邊欄中實現UI Bootstrap選項卡

Question

我正在使用UI Bootstrap和AngularJS，我試圖使用col-md-2和col-md-10將垂直製表符分隔到側欄中。

目前我...

<uib-tabset active="activePill" vertical="true" type="pills"> 
    <uib-tab heading="Tab 1">Vertical content 1</uib-tab> 
    <uib-tab heading="Tab 2">Vertical content 2</uib-tab> 
    <uib-tab heading="Tab 3">Vertical content 3</uib-tab> 
</uib-tabset> 

...這...輸出

<div active="activePill" vertical="true" type="pills" class="ng-isolate-scope"> 
    <ul class="nav nav-pills nav-stacked" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude=""> 
     <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope active" heading="Tab 1"> 
      <a href="" ng-click="select($event)" class="nav-link ng-binding" uib-tab-heading-transclude="">Tab 1</a> 
     </li> 
     <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope" heading="Tab 2"> 
      <a href="" ng-click="select($event)" class="nav-link ng-binding" uib-tab-heading-transclude="">Tab 2</a> 
     </li> 
     <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope" heading="Builds"> 
      <a href="" ng-click="select($event)" class="nav-link ng-binding" uib-tab-heading-transclude="">Tab 3</a> 
     </li> 
    </ul> 
    <div class="tab-content"> 
     <!-- ngRepeat: tab in tabset.tabs --> 
     <div class="tab-pane ng-scope active" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab"> 
      <span class="ng-scope">Vertical content 1</span> 
     </div> 
     <!-- end ngRepeat: tab in tabset.tabs --> 
     <div class="tab-pane ng-scope" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab"> 
      <span class="ng-scope">Vertical content 2</span> 
     </div> 
     <!-- end ngRepeat: tab in tabset.tabs --> 
     <div class="tab-pane ng-scope" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab"> 
      <span class="ng-scope">Vertical content 3</span>  
     </div> 
     <!-- end ngRepeat: tab in tabset.tabs --> 
    </div> 
</div> 

我想有...

<div active="activePill" vertical="true" type="pills" class="ng-isolate-scope"> 
    <ul class="nav nav-pills nav-stacked col-md-2" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude=""> 
    <!-- snip --> 
    </ul> 
    <div class="tab-content col-md-10"> 
    <!-- snip --> 
    </div> 
</div> 

（加col-md-2和col-md-10）

Answer 1

我的團隊曾經領導這個，我不認爲你可以把他們放在一邊（它與指令的結構有關），所以我們必須刪除body指令，縮小製表符容器並在不同的div上顯示狀態視圖正確的。

<div class="col-sm-2"> 
    <uib-tabset active="active" vertical="true" type="pills"> 
    <uib-tab heading="Tab 1" select="selected(1)"></uib-tab> 
    <uib-tab heading="Tab 2" select="selected(2)"></uib-tab> 
    <uib-tab heading="Tab 3" select="selected(3)"></uib-tab> 
    </uib-tabset> 
</div> 
<div class="col-sm-10"> 
    <div ng-show="selectedView===1"> 
    Show what tab 1 is selected 
    </div> 
    <div ng-show="selectedView===2"> 
    Show what tab 2 is selected 
    </div> 
    <div ng-show="selectedView===3"> 
    Show what tab 3 is selected 
    </div> 
</div> 

Sample plunker

當然，這是一個簡化的情況下，我們做的是，用ui-router顯示在右側不同的狀態，這使得它更「真正的」導航條，我們沒」不得不重複醜陋的<div ng-show="selectedView===#">標記部分。