angularjs - AngularJS 和字体真棒问题

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>元素的字体。<i>但是由于某种原因，当我使用 Angular通过“avatar.icon”将特殊字符值插入到元素中时，我的字体不会呈现。

我在视图中添加了第二<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

索引.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，否则这些都不起作用。

应用程序.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 中添加花括号

解释

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