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