Вкладка в AngularJS Bootstrap в tabset заголовок

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

какие идеи?

спасибо

22
angular-ui-bootstrap angularjs angularjs-bootstrap

5 ответов

угловой Bootstrap v0.14+

угловой 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 в заголовке (как показано в Примере в 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 здесь.

45

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

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

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

0

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

глядя на шаблон, используемый директивой 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" +
    "");
}]);

вы также необходимо будет провести очистку.js для безопасной привязки содержимого html.

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

0

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