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('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通过“avatar.icon”将特殊字符值插入<i>元素时，我的字体将无法渲染。

我在视图中添加了第二个<li>组以确保它确实是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

Answer 2

的index.html

<script src="components/angular/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-sanitize.min.js"></script>

• ！important请确保添加angular-sanitize.js，否则不会 工作

app.js

angular.module('myApp', ['ngSanitize'])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        redirectTo: '/home'
      })
  });

• 将'ngSantize'注入myApp

main.js

angular.module('myApp')
  .controller('AboutCtrl', function($scope) {
    $scope.avatars = [
      {"icon": "", "bg": "twitter.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"}
    ];
  });

• 这里没什么奇怪的，只是设置范围

about.html

<li ng-repeat="avatar in avatars" style="background-image: url(images/{{avatar.bg}})">
  <a class="social" href="{{avatar.href}}" target="_blank">
    <i ng-sanitize ng-bind-html="avatar.icon"></i>
  </a>
</li>

• 使用ng-bind-html正确处理特殊字符
• 确保不在ng-bind-html
中添加花括号

说明

以上是我的完整解决方案，其中包含一些周围的轴承代码。