2014-08-28 102 views
3

嗨我是新的角度js,如何在角度js中添加圖標標籤>

我的問題是如何將圖標添加到角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>">

,但它顯示的一切正是因爲裏面寫的標題,而不是渲染爲我ExSpect語言跨度..

請幫我。

回答

13

我假設你正在使用angular-ui bootstrap。使用tab-heading指令並將您的圖標放在那裏。

<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> 
+0

謝謝,但我找到這個我想這個... – 2014-08-28 10:40:41

1

我使用這個固定我的問題:

<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

0

出於某種原因,我得到了使用tab-heading以下錯誤上面的建議:

'tab-heading' is not a known element 

儘管選項卡工作正常,並且tab指令存在於我的本地庫中。 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> 

這對我很有用。也許是由於不同的版本?或者缺少一些依賴或聲明。隨時糾正我或加強這種反應。