4

意見

<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": "&#xf09b;", "bg": "github.jpeg", "href": "http://google.com"},
    {"icon": "&#xf0d4;", "bg": "twitter.jpeg", "href": "http://google.com"},
    {"icon": "&#xf081;", "bg": "gplus.jpg", "href": "http://google.com"},
    {"icon": "&#xf082;", "bg": "fb.jpg", "href": "http://google.com"}
  ];
})

問題

@font-face を使用して「Font Awesome」を CSS ファイルに追加し、それをすべての<i>要素のフォントとして設定しました。<i>しかし、何らかの理由で、Angular を使用して「avatar.icon」を介して要素に特殊文字の値を挿入すると、フォントがレンダリングされません。

ビューに2 番目のグループを追加して、<li>実際に Angular であり、CSS 固有の問題ではないことを確認しましたが、2 番目の<i>タグの特殊文字は問題なくレンダリングされます。

見落としているものがあることは知っていますが、それを理解することはできません。よろしくお願いします。

4

2 に答える 2

3

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'])

アップデート：

コメントの 1 つに従って、http://docs.angularjs.org/api/ng.directive: ngBindHtmlUnsafeも使用できます。 ng-bind-html-unsafe="{expression}"

于 2013-04-23T00:07:19.757 に答える