Angularjs scheda di avvio scheda tabset

Question

Mi chiedo se sia possibile scrivere html all'interno di un'intestazione di tabset di bootstrap di Angularjs tabstrap. Sto cercando di aggiungere un svg all'interno del titolo. Ho creato un breve snippet in plunker per provare a dimostrare il problema che sto avendo.

<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

tutte le idee?

grazie

Answer 1

angolare Bootstrap v0.14 +

Bootstrap angolare v0.14 introduced new prefixes per la maggior parte dei controlli precedentemente forniti. La seguente risposta originale si applica ancora, ma è necessario utilizzare i nuovi nomi di tag uib-tabset, uib-tab e 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> 

angolare Bootstrap < v0.14

si dovrebbe utilizzare l'elemento tab-heading all'interno dell'elemento tab se si desidera HTML all'interno della rubrica (come mostrato nell'esempio nella 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> 

Aggiornamento plunker here.

Answer 2

[modifica] La risposta di Taylor Buchanan è la risposta corretta!

Guardando il modello utilizzato dalla direttiva linguette, il contenuto intestazioni sarà sfuggito: https://github.com/angular-ui/bootstrap/blob/192768e109b5c4a50c7dcd320e09d05fedd4298a/template/tabs/tab.html#L2

per cui non è possibile usare l'HTML nelle vostre intestazioni.

---

È possibile creare un work-around ridefinendo il modello di scheda in questo modo:

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" + 
    ""); 
}]); 

Sarà inoltre necessario nclude angolari-sanitize.js di legare in modo sicuro contenuti HTML.

lavoro Demo qui: http://plnkr.co/edit/ep5f1GY12vSixT4xtxFy?p=preview

Answer 3

Si può dare il tag TAB un id e quindi utilizzare jQuery per aumentare il codice html.
... scheda id = "myid" ....

e poi jQuery ("# myid"). Html ("Nuovo 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

Dal 2016

La risposta accettata è ok per il ui-bootstrap prima version 0.14.0, a partire dalla versione 0.14.0(2015/10/09) schede utilizzano uib- prefisso.

Vedi changelog

modo da avere a sostituire tutti i tag con uib- prefisso

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