Angularjs bootstrap tabset选项卡标题

Question

我想知道是否可以在angularjs bootstrap tabset选项卡标题内编写html。我想在标题中添加一个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

任何想法？

谢谢

Answer 1

Angular Bootstrap v0.14 +

对于大多数以前提供的控件，

Angular Bootstrap v0.14 introduced new prefixes。以下原始答案仍然适用，但您必须使用新的代码名称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＆lt; v0.14

如果您希望标题中包含HTML，则应使用tab-heading元素中的tab元素（如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 here。

Answer 2

自2016年起

对于 ui-bootstrap 之前的version 0.14.0，已接受的答案是可以的，因为版本0.14.0 （2015.10.09）标签使用{{ 1}}前缀。

请参阅changelog

所以你必须用uib-前缀

替换所有标签

uib-

Answer 3

[编辑] Taylor Buchanan的回答是正确答案！

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

您还需要包含angular-sanitize.js以安全地绑定html内容。

此处的工作演示：http://plnkr.co/edit/ep5f1GY12vSixT4xtxFy?p=preview

Answer 4

你可以给你的TAB标签一个id，然后使用jQuery来增加html               ... tab id =“myid”....

然后               jQuery（“＃myid”）。html（“ New Html ”）

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>