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 为大多数以前提供的控件引入了新的前缀.下面仍然是原来的答案适用,但必须使用新的标签名称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元素(如文档中的示例所示):

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

Answer 2

自2016年起

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