【问题标题】：Angularjs bootstrap tabset tab headingAngularjs引导标签集标签标题
【发布时间】：2016-12-16 23:20:18
【问题描述】：

我想知道是否可以在 angularjs bootstrap tabset 选项卡标题中编写 html。我正在尝试在标题中添加一个 svg。我在 plunker 中创建了一个快速的 sn-p 来尝试演示我遇到的问题。

<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

有什么想法吗？

谢谢

【问题讨论】：

标签： angularjs angular-ui-bootstrap angularjs-bootstrap

【解决方案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 引导

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

【讨论】：

请记住，如果您试图让它在 IE8 中工作，那么您需要使用属性而不是元素。所以：<div tabset><div tab><div tab-heading><span>hello</span></div></div></div>

【解决方案2】：

自 2016 年起

对于之前的version 0.14.0，ui-bootstrap 接受的答案是可以的，因为版本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】：

你可以给你的 TAB 标签一个 id，然后使用 jQuery 来扩充 html。
...标签 id="myid"....

然后 jQuery("#myid").html("新建 Html")

【讨论】：

这不符合“The Angular Way”。见stackoverflow.com/questions/14994391/…

【解决方案4】：

[edit] 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

【讨论】：

感谢您查看此内容。我会试一试，然后告诉你结果。

【解决方案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>

【讨论】：

不鼓励仅使用代码的答案。此外，这并不试图回答这个问题。