Angularjs bootstrap tabulator tab

Question

Zastanawiam się, czy możliwe jest napisanie html wewnątrz nagłówka tabset angularjs bootstrap. Próbuję dodać svg do tytułu. Utworzyłem krótki fragment w plunkerze, aby spróbować pokazać, jaki mam problem.

<tabset> 
    <tab heading="<span>hello</span><em>1</em>">One</tab> 
    <tab heading="Two">Two</tab> 
    <tab heading="Three">Three</tab> 
</tabset> 

http://plnkr.co/edit/qFsFGDNUIJj9nIF51ApU

jakieś pomysły?

dzięki

Answer 1

kątowa Bootstrap v0.14 +

Angular Bootstrap v0.14 introduced new prefixes dla większości wcześniej dostarczonych elementów sterujących. Oryginalna odpowiedź poniżej nadal obowiązuje, ale musisz użyć nowych nazw tagów: uib-tabset, uib-tab i uib-tab-heading.

<uib-tabset> 
    <uib-tab> 
    <uib-tab-heading> 
     <span>hello</span><em>1</em> 
    </uib-tab-heading> 
    One 
    </uib-tab> 
    <uib-tab heading="Two">Two</uib-tab> 
    <uib-tab heading="Three">Three</uib-tab> 
</uib-tabset> 

kątowa Bootstrap < v0.14

Powinieneś pomocą elementu tab-heading wewnątrz elementu tab jeśli chcesz HTML w pozycji (jak pokazano na przykład w docs):

<tabset> 
    <tab> 
    <tab-heading> 
     <span>hello</span><em>1</em> 
    </tab-heading> 
    One 
    </tab> 
    <tab heading="Two">Two</tab> 
    <tab heading="Three">Three</tab> 
</tabset> 

Zaktualizowany plunker here.

Answer 2

[edytuj] Odpowiedź Taylor Buchanana jest poprawna odpowiedź!

Patrząc na matrycy stosowanej przez dyrektywę kartach zawartość rubryki zostaną uciekł: https://github.com/angular-ui/bootstrap/blob/192768e109b5c4a50c7dcd320e09d05fedd4298a/template/tabs/tab.html#L2

Więc to nie jest możliwe, aby używać HTML w swoich pozycjach.

---

Można utworzyć obejście poprzez ponowne zdefiniowanie szablonu kartę tak:

angular.module("template/tabs/tab.html").run(["$templateCache", function($templateCache) { 
    $templateCache.put("template/tabs/tab.html", 
    "<li ng-class=\"{active: active, disabled: disabled}\">\n" + 
    " <a ng-click=\"select()\" tab-heading-transclude ng-bind-html=\"heading\"></a>\n" + 
    "</li>\n" + 
    ""); 
}]); 

Potrzebny będzie również do nclude skośnych sanitize.js bezpiecznie wiązać zawartość HTML.

Demo robocza tutaj: http://plnkr.co/edit/ep5f1GY12vSixT4xtxFy?p=preview

Answer 3

Można dać zakładka identyfikator, a następnie użyć jQuery do zwiększenia html.
... Zakładka id = "myid" ....

a następnie jQuery ("# myid"). Html ("New Html")

Answer 4

  <li heading="Status" class="ng-isolate-scope var" ng-model="(var = 'active: active')" > 
       <a href="/ibox">Status1</a> 
      </li> 


      <li heading="Status" class="ng-isolate-scope var" ng-model="var = 'active: active'"> 
       <a href="/netapp">Status</a> 
      </li> 


    </tabset> 

Answer 5

Od 2016

Zaakceptowanych odpowiedź jest ok dla ui-bootstrap uprzedniej version 0.14.0, od wersji 0.14.0(09.10.2015) wypustki używać uib- prefiks.

Zobacz changelog

Więc trzeba wymienić wszystkie znaczniki z uib- prefiksu

<uib-tabset> 
    <uib-tab> 
    <uib-tab-heading> 
     <span>hello</span><em>1</em> 
    </uib-tab-heading> 
    One 
    </uib-tab> 
    <uib-tab heading="Two">Two</uib-tab> 
    <uib-tab heading="Three">Three</uib-tab> 
</uib-tabset>