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;
};

因为这仍然是＆＃34;丑陋＆＃34;你应该看一下directives。