Заголовок вкладки tabstrap заголовка Angularjs

Мне интересно, можно ли написать html внутри заголовка вкладки tabstrap. Я пытаюсь добавить svg внутри заголовка. Я создал быстрый фрагмент в plunker, чтобы попытаться продемонстрировать проблему, с которой я сталкиваюсь.

<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

любые идеи?

спасибо

Ответ 1

Angular Bootstrap v0.14 +

Angular Bootstrap v0.14 представил новые префиксы для большинства ранее предоставленных элементов управления. Исходный ответ ниже по-прежнему применяется, но вы должны использовать новые имена тегов uib-tabset, uib-tab и 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>

Angular Bootstrap < V0.14

Вы должны использовать элемент tab-heading в элементе tab, если вы хотите HTML внутри заголовка (как показано в примере в 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>

Обновлен плункер здесь.

Ответ 2

С 2016 года

Принятый ответ одобрен для ui-bootstrap до version 0.14.0, так как вкладки 0.14.0 (2015.10.09) используют префикс uib-.

См. changelog

Итак, вы должны заменить все теги префиксом 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>

Ответ 3

[править] Ответ Тейлора Бьюкенена - правильный ответ!

Посмотрев на шаблон, используемый директивой tabs, содержимое заголовков будет экранировано: https://github.com/angular-ui/bootstrap/blob/192768e109b5c4a50c7dcd320e09d05fedd4298a/template/tabs/tab.html#L2

Таким образом, вы не можете использовать html в своих заголовках.

Вы можете создать обход, переопределив шаблон табуляции следующим образом:

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

Вам также нужно будет nclude angular -sanitize.js безопасно связать содержимое html.

Рабочий демонстрационный пример здесь: http://plnkr.co/edit/ep5f1GY12vSixT4xtxFy?p=preview

Ответ 4

Вы можете дать тегу TAB идентификатор, а затем использовать jQuery для увеличения html.
... tab id = "myid"....

а затем jQuery ( "# myid" ). html ( " Новый HTML" )

Ответ 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>