18

true 値の代わりに (ブートストラップ) アイコンを挿入する小さな角度フィルターがあります。動作しますが、html はエンコードされています。

  var conApp = angular.module('conApp', []);
  conApp.filter('trueIcon', function($filter){
    return function(booleanValue){
        return booleanValue ? '<i class="icon-ok"></i>' : '';
    }
  });

html をデコードするために別のフィルターを実装する必要がありますか? これを行う「角度のある」方法はありますか？

4

3 に答える 3

28

htmlをレンダリングするには、ng-bind-htmlを使用する必要があります。

<span ng-bind-html="foo | trueIcon"></span>

そうは言っても...それは実際にはフィルターの目的ではありません。フィルタは、ビュー/ DOM自体の要素を生成するのではなく、ビューに書き込まれるデータをスクラブするためのものです。そのためのディレクティブを作成したほうがよいでしょう。

app.directive('trueIcon', function() {
   return {
      restrict: 'E',
      template: '<i ng-class="{\'icon-ok\': value, \'icon-not-okay\': !value}"></i>',
      scope: {
         value: '='
      }
   };
});

<true-icon value="foo"></true-icon>
于 2013-02-04T17:47:50.177 に答える
6

AngularJS は、デフォルトで式評価の結果をサニタイズしています。HTML をマークアップとして表示するには、次の 2 つのオプションがあります。

上記でフィルターが機能しますが、ディレクティブに変更することを検討する必要がありますか?

于 2013-02-04T17:50:11.210 に答える