Angular Js ui.bootstrap標籤定製

Question

我在我的項目中使用角度js ui.bootstrap，我想使用ui bootstrap添加標籤。我爲選項卡使用了ui.bootstrap指令。但是，這個角度的ui bootstrap標籤中沒有ul裏面的內容。

<uib-tabset active="active"> 
    <uib-tab index="0" heading="Static title 1">Static content 1</uib-tab> 
    <uib-tab index="0" heading="Static title 2">Static content 2</uib-tab> 
    <uib-tab index="0" heading="Static title 3">Static content 3</uib-tab> 
</uib-tabset> 

我想在選項卡中的標籤內添加一個span標籤。這是我想要的輸出。

<li ng-class="{active: active, disabled: disabled}" index="0" heading="Static title 1" class="ng-isolate-scope active"> 
    <a href="" ng-click="select()" uib-tab-heading-transclude="" class="ng-binding"> 
    <span class="badge">5</span>Static title 1 
    </a> 
</li> 

如果有人知道如何做到這一點，請幫我找出解決方案。

在此先感謝。

Answer 1

你可以在uib-tab裏面使用uib-tab-heading指令在標題中有自己的自定義html。此後，您可以在uib-tab-heading元素內指定您的html內容，然後在標題頁眉內將其轉換。

標記

<uib-tabset active="active"> 
    <uib-tab index="0" heading="Static title 1"> 
     <uib-tab-heading> 
      <span class="badge">5</span>Static title 1 
     </uib-tab-heading> 
    </uib-tab> 
    <uib-tab index="0" heading="Static title 2"> 
     <uib-tab-heading><b> 
     <span class="badge">5</span>Static title 3 

    </uib-tab> 
    </uib-tab> 
    <uib-tab index="0" heading="Static title 3"> 
     <uib-tab-heading><b> memory utilization </b> 
      <span class="badge">5</span>Static title 3 
     </uib-tab-heading> 
    </uib-tab> 
</uib-tabset>