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>