web-dev-qa-db-fra.com

Angularjs bootstrap en-tête de l'onglet tabset

Je me demande s'il est possible d'écrire du html dans un en-tête de tabulation angularjs bootstrap tabset. J'essaie d'ajouter un svg à l'intérieur du titre. J'ai créé un extrait rapide dans plunker pour essayer de démontrer le problème que je rencontre.

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

des idées?

merci

angularjsangular-ui-bootstrapangularjs-bootstrap
22
Ross_

Angulaire Bootstrap v0.14 +

Angulaire Bootstrap v0.14 introduit de nouveaux préfixes pour la plupart des contrôles précédemment fournis. La réponse d'origine ci-dessous s'applique toujours, mais vous devez utiliser les nouveaux noms de balise uib-tabset, uib-tab, et 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>

Angulaire Bootstrap <v0.14

Vous devez utiliser le tab-heading élément dans l'élément tab si vous voulez du HTML dans l'en-tête (comme le montre l'exemple dans le 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 mis à jour ici .

45
Taylor Buchanan

Depuis 2016

La réponse acceptée est correcte pour le ui-bootstrap avant version 0.14.0, depuis la version 0.14.0 (2015.10.09) les onglets utilisent uib- préfixe.

Voir changelog

Vous devez donc remplacer toutes les balises par uib- préfixe

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

Vous pouvez attribuer un identifiant à votre balise TAB, puis utiliser jQuery pour augmenter le code HTML.
... tab id = "myid" ....

puis jQuery ("# ​​myid"). html ("Nouveau HTML")

0
Scott

[modifier] La réponse de Taylor Buchanan est la bonne réponse!

En regardant le modèle utilisé par la directive tabs, le contenu des en-têtes sera échappé: https://github.com/angular-ui/bootstrap/blob/192768e109b5c4a50c7dcd320e09d05fedd4298a/template/tabs/tab.html#L2 =

Il n'est donc pas possible d'utiliser du HTML dans vos rubriques.

Vous pouvez créer une solution de contournement en redéfinissant le modèle d'onglet comme suit:

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

Vous devrez également inclure angular-sanitize.js pour lier en toute sécurité le contenu html.

Démonstration de travail ici: http://plnkr.co/edit/ep5f1GY12vSixT4xtxFy?p=preview

0
badsyntax