生成html的角度过滤器

Question

我有一个小的角度过滤器,插入(引导)图标代替真值.它工作但html编码:

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

我是否必须实现另一个过滤器来解码html？有这种"有角度"的方式吗？

Answer 1

您需要使用ng-bind-html来呈现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>

Answer 2

AngularJS默认清理表达式评估的结果.要将HTML显示为标记,您有两个选项:

• http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml(来自ngSanitize模块)
• http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe(我不推荐这个,因为它会带来潜在的安全风险).

虽然以上将使您的过滤器工作,也许你应该考虑把它变成一个指令？