uib - Angularjs bootstrap tabset tab head

angular ui

Question

Me pregunto si es posible escribir html dentro de un encabezado de pestaña de conjunto de fichas de bootstrap de angularjs. Estoy tratando de agregar un svg dentro del título. He creado un fragmento rápido en plunker para intentar demostrar el problema que tengo.

<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

¿algunas ideas?

Gracias

Answer 1

Desde 2016

La respuesta aceptada es aceptable para la version 0.14.0 anterior de ui-bootstrap version 0.14.0 , ya que las 0.14.0 versión 0.14.0 ( 0.14.0 ) usan el prefijo uib- .

Ver registro de cambios

Así que tienes que reemplazar todas las etiquetas con el prefijo uib-

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

Answer 2

Vástago angular v0.14 +

Angular Bootstrap v0.14 introdujo nuevos prefijos para la mayoría de los controles proporcionados anteriormente. La respuesta original a continuación sigue siendo válida, pero debe usar los nuevos nombres de etiquetas uib-tabset , uib-tab y 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>

Correa de arranque angular <v0.14

Debería usar el elemento de tab-heading dentro del elemento de tab si desea HTML dentro del encabezado (como se muestra en el ejemplo en la 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>

Plunker actualizado here .

Answer 3

Puede asignar a su etiqueta TAB un ID y luego usar jQuery para aumentar el html.
... tab id = "myid" ....

y luego jQuery ("# ​​myid"). html (" New Html ")

Answer 4

[editar] ¡La respuesta de Taylor Buchanan es la correcta!

Mirando la plantilla utilizada por la directiva de pestañas, el contenido de los encabezados se escapará: https://github.com/angular-ui/bootstrap/blob/192768e109b5c4a50c7dcd320e09d05fedd4298a/template/tabs/tab.html#L2

Por lo tanto, no es posible utilizar html en sus encabezados.

Puede crear una solución temporal al redefinir la plantilla de la pestaña de la siguiente manera:

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

También deberá excluir angular-sanitize.js para enlazar de forma segura los contenidos html.

Demostración de trabajo aquí: http://plnkr.co/edit/ep5f1GY12vSixT4xtxFy?p=preview

Answer 5

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