Angular Js ui.bootstrapタブのカスタマイズ

Question

私のプロジェクトでは、角度js ui.bootstrapを使用しています.Uiブートストラップを使用してタブを追加します。私はタブのui.bootstrapディレクティブを使用しています。しかし、その角度ui bootstrapタグの中にul liの内容はありません。

<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> 

タブのaタグの内側にスパンタグを追加したいとします。これは私が望む出力です。

<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-heading指示文内でuib-tabを使用すると、見出しの中に独自のカスタム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>