如何在 Angular js 的选项卡中添加图标 >答案

【问题标题】：how to add icon in tab in angular js >如何在 Angular js 的选项卡中添加图标 >
【发布时间】：2014-08-28 10:30:31
【问题描述】：

您好，我是 Angular js 的新手，

我的问题是如何在 Angular js 中向选项卡添加图标？这就是我目前所拥有的：

<tabset panel-tabs="true" panel-class="{{demoTabbedPanelClass}}" heading="{{demoTabbedPanelHeading}}">
  <tab heading="Tab 1 some text ">sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
  </tab>
  <tab heading="Tab 2 ded">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam consectetur sint. Nobis facere illo iste quaerat sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
  </tab>
</tabset>

我正在添加<tab heading="Tab 2 ded <span class="icon-print">print</span>">

但它完全按照标题中的内容显示所有内容，而不是像我预期的那样呈现跨度..

请帮帮我。

【问题讨论】：

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

我假设您正在使用 angular-ui 引导程序。使用tab-headingdirective 并将您的图标放在那里。

<tabset panel-tabs="true" panel-class="{{demoTabbedPanelClass}}" heading="{{demoTabbedPanelHeading}}">
  <tab heading="Tab 1 some text ">sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
  </tab>
  <tab>
    <tab-heading>
      <i class="icon-print"></i> Tab 2 ded
    </tab-heading>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam consectetur sint. Nobis facere illo iste quaerat sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
  </tab>
</tabset>

【讨论】：

【解决方案2】：

我用这个解决了我的问题：

<tabset>
    <tab heading="Static title">Static content</tab>
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
      {{tab.content}}
    </tab>
    <tab select="alertMe()">
      <tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </tab-heading>
      I've got an HTML heading, and a select callback. Pretty cool!
    </tab>
  </tabset>

更多详情请联系 this link

【讨论】：

【解决方案3】：

由于某种原因，我使用上面建议的tab-heading 得到以下错误：

'tab-heading' is not a known element

虽然选项卡工作正常，并且选项卡指令存在于我的本地库中。 documentation 建议以下示例：

<tab (select)="alertMe()">
  <template tabHeading>
    <i class="glyphicon glyphicon-bell"></i> Alert!
  </template>
  I've got an HTML heading, and a select callback. Pretty cool!
</tab>

这对我有用。可能是因为版本不同？或者缺少一些依赖项或声明。请随时纠正我或加强此回复。

【讨论】：