Заголовок вкладки начальной загрузки Angularjs

Мне интересно, можно ли написать html внутри заголовка вкладки вкладки начальной загрузки angularjs. Я пытаюсь добавить 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

есть идеи?

Спасибо

Источник

5 ответов

Решение

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>

Угловая Бутстрап

Вы должны использовать tab-heading элемент внутри tab Элемент, если вы хотите HTML внутри заголовка (как показано в примере в документации):

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

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

Источник

С 2016 года

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

Смотрите список изменений

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

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

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

Источник

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

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

Поэтому невозможно использовать 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

Источник 

            <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>
Источник
Другие вопросы по тегам