Angular Js ui.bootstrap sekmeleri özelleştirme

Question

Projemde angular js ui.bootstrap kullanıyorum ve ui önyükleme kullanarak sekme eklemek istiyorum. Sekmeler için ui.bootstrap yönergesini kullanıyorum. Ancak bu açısal kullanıcı arabirimi etiketinde ül li içerik yok.

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

Sekmelerdeki etiketin içine bir span etiketi eklemek istiyorum. Bu istediğim çıktı.

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

Bunu nasıl yapacağını bilen varsa, lütfen çözümü bulmama yardımcı olun.

Şimdiden teşekkürler.

Answer 1

uib-tab iç uib-tab-heading yönergesini kullanarak kendi özel html iç yönünüzü kullanabilirsiniz. Daha sonra, html içeriğinizi uib-tab-heading öğesinin içinde belirtebilirsiniz, daha sonra sekme başlığının içine aktarabilirsiniz.

Biçimlendirme

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