23

我想知道是否可以在 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

有任何想法吗？

谢谢

4

5 回答 5

47

角引导 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>

角引导 < 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 。

于 2014-09-29T19:47:56.277 回答
5

自 2016 年起

接受的答案对于ui-bootstrap prior是可以的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>
于 2016-10-24T07:19:06.547 回答
0

[编辑] 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

于 2014-09-29T15:03:27.373 回答
0

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

然后 jQuery("#myid").html(" New Html ")

于 2014-09-29T17:58:01.407 回答
-1 

            <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>
于 2015-04-29T18:22:33.147 回答