如何创建输出HTML的angularjs过滤器

阅读AngularJS教程第9步后， 我创建了自己的AngularJS过滤器，该过滤器应将布尔数据转换为html。

这是我的过滤器代码：

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>

但这不是我想要的。

您应该使用ng-bind-html指令（需要导入清理模块和js文件）：https : //docs.angularjs.org/api/ng/directive/ngBindHtml

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

您还需要导入CSS（我想是Bootstrap），以便在工作时能够看到该图标。

我提供了一个有效的例子。

除非我读错了，否则你走错路了

我认为ng-class是该工作所需的指令，并且比渲染到class属性更安全。

在您的情况下，只需添加对象字符串，将id字符串作为类，将值作为求值表达式

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

附带一提，您应该仅使用指令（内置和自定义）来操作html / dom，如果需要更复杂的html渲染，则应改用指令

试试这个过滤器

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

需要角度消毒

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

要点链接