AngularJS 和 Font Awesome 问题

Question

看法

<li ng-repeat="avatar in avatars" style="background-image: url(images/{{avatar.bg}})">
  <i>{{avatar.icon}}</i>      
</li>
<li><i>&#xf09b;</i></li>

Controller

.controller('AboutCtrl', function($scope) {
  $scope.avatars = [
    {"icon": "", "bg": "github.jpeg", "href": "http://google.com"},
    {"icon": "", "bg": "twitter.jpeg", "href": "http://google.com"},
    {"icon": "", "bg": "gplus.jpg", "href": "http://google.com"},
    {"icon": "", "bg": "fb.jpg", "href": "http://google.com"}
  ];
})

问题

我使用@font-face 将“Font Awesome”添加到我的CSS 文件中，然后将其设置为所有 <i> 的字体。元素。但是由于某种原因，当我使用 Angular 将特殊字符值插入 <i> 时，我的字体不会呈现。通过“avatar.icon”元素。

我添加了第二个 <li>在 View 中分组以确保它确实是 Angular 而不是 CSS 特异性问题，而是第二个 <i> 中的特殊字符标签渲染得很好。

我知道我忽略了一些东西，但我无法弄清楚。提前谢谢你。

Answer 1

我相信您需要包含 ngSanitize模块和使用ng-bind-html像这样:

<i ng-bind-html='avatar.icon'></i>

文档: http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml

请注意，有一个单独的库 angular-sanitize.js，您可以像这样包含模块:

angular.module('yourApp', ['ngCookies','ngResource','ngSanitize'])

更新:

根据其中一条评论，您还可以使用: ng-bind-html-unsafe="{expression}" http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe