AngularJS呈現模板中的圖標的FontAwesome html代碼

Question

我正在尋找一種方法來使用控制器中的功能在各種地方放置圖標。

我的控制器有：

$scope.fa_icon = function (icon) { 
    return "<span class='fa fa-" + icon + "'></span>"; 
}; 

template.html

<button> {{ fa_icon("headphones") }} Music </button> 

目前在template.html我看到的HTML代碼，而不是渲染HTML代碼。

如果我需要使用ng-bind-html我還需要一些變量的<p ng-bind-html="myHTML"></p>格式但fa_icon("headphones")結果已經包含了<span>標籤，我不希望與另一個標籤，就像一個補丁把它包起來。

所以我想知道如果有什麼我可以使用控制器內調整這個...

Answer 1

您可以使用ng-attr這樣

<button><i ng-attr-class="{{ fa_icon('headphones') }}"></i></button> 

$scope.fa_icon = function (icon) { 
    return "fa fa-" + icon; 
}; 

由於這仍然是「醜」你應該有看看directives。