92

AngularJS チュートリアルのステップ 9を読んだ後 、ブーリアン データを html に変換する独自の AngularJS フィルターを作成しました。

これが私のフィルターコードです：

angular.module('phonecatFilters', []).filter('iconify', function () { // My custom filter
    return function (input) {
        return input ? '<i class="icon-ok"></i>' : '<i class="icon-remove"></i>';
    }
});

ここに私のHTMLコードがあります:

<dt>Infrared</dt>
  <dd>{{phone.connectivity.infrared | iconify }}"></dd>

問題は、ブラウザが戻り値を文字通り次のように表示することです。

<i class="icon-ok"></i>

表示されるアイコン (またはレンダリングされた html) としてではありません。

これがJSFiddleの例です

この過程である程度の消毒が行われると思います。

この特定のフィルターでこのサニタイズをオフにすることはできますか?

また、フィルターから HTML 出力を返すのではなく、代わりに使用できる「OK」または「削除」テキストだけでアイコンを表示する方法も知っています。

<i class="icon-{{phone.connectivity.infrared | iconify}}"><i>

しかし、これは私が望むものではありません。

4

3 に答える 3

113

ディレクティブを使用するng-bind-html必要があります (サニタイズ モジュールと js ファイルをインポートする必要があります): https://docs.angularjs.org/api/ng/directive/ngBindHtml

<span ng-bind-html='phone.connectivity.infrared | iconify'></span>

アイコンが機能するときにアイコンを表示できるようにするには、CSS（ Bootstrapだと思います）をインポートする必要もあります。

私は実際の例を提供しました。

于 2012-11-06T14:02:37.170 に答える
17

Unless I am reading it wrong, you are approaching in the wrong way.

I think ng-class is the directive you need for this job and is safer than rendering to class attribute.

In your case just add object string with the id strings as the class and the value as the evaluated expression.

<i ng-class="{
'icon-ok':!phone.connectivity.infrared,
'icon-remove':phone.connectivity.infrared
}"></i>'

On a side note, you should only use directives (built-in and custom) to manipulate html/dom and if you needed a more complex html render you should look at directive instead.

于 2013-10-04T08:41:34.033 に答える
12

このフィルターを試す

filter('trust', ['$sce',function($sce) {
  return function(value, type) {
    return $sce.trustAs(type || 'html', value);
  }
}]);

angular-sanitizeが必要です

var app = angular.module("myApp", ['ngSanitize']);

要旨リンク

于 2015-07-16T18:55:17.807 に答える