[解決済み] HTMLを出力するangularjsフィルタの作成方法

質問

読後感 AngularJSチュートリアル ステップ-9 を読んで、私は自分自身の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出力を返さず、「ok」または「remove」テキストに置き換えることで、アイコンを表示する方法を知っています。

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

が、これは私が欲しいものではありません。

どうすればよいのでしょうか？

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

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

また、CSSをインポートする必要があります ( ブートストラップ だと思う)をインポートして、動作時にアイコンが表示されるようにします。

を用意したのですが の動作例です。 .