HTMLを出力するangularjsフィルターを作成する方法

Question 1

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>

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

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

表示されるはずのアイコン（またはレンダリングされたhtml）ではありません。

ここにJSFiddleの例があります

この過程である程度の衛生状態が発生すると思います。

この特定のフィルターに対してこのサニタイズをオフにすることは可能ですか？

また、フィルターからHTML出力を返さずにアイコンを表示する方法も知っています。代わりに、次のように置き換えることができます。

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

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

Question 2

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

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

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

実用的な例を提供しました。

Question 3

私がそれを間違って読んでいない限り、あなたは間違った方法で近づいています

ng-classはこのジョブに必要なディレクティブであり、クラス属性にレンダリングするよりも安全だと思います。

あなたのケースでは、クラスとしてid文字列、評価された式として値を持つオブジェクト文字列を追加するだけです

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

余談ですが、html / domの操作にはディレクティブ（組み込みおよびカスタム）のみを使用してください。より複雑なhtmlレンダーが必要な場合は、代わりにディレクティブを確認してください。

Question 4

このフィルターをお試しください

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

角度消毒が必要

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

要旨リンク