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

Question

在阅读AngularJS tutorial step-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)。

Here is JSFiddle example

我认为在这个过程中会发生一些消毒。

是否可以为此特定筛选器关闭此清理？

此外，我知道如何通过不从过滤器返回HTML输出来显示图标，而只返回“ok”或“remove”文本，然后我可以替换为：

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

但这不是我想要的。

Answer 1

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

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

您还需要导入CSS (我猜是Bootstrap)才能在图标正常工作时看到它。

我已经提供了一个working example。

Answer 2

除非我读错了，否则你正在以错误的方式接近它。

我认为ng-class是这个任务所需要的指令，而且比渲染到类属性更安全。

在本例中，只需添加对象字符串，其中id字符串作为类，值作为计算表达式。

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

另外，您应该只使用指令(内置和自定义)来操作html/dom，如果您需要更复杂的html呈现，您应该改为使用指令。

Answer 3

尝试此过滤器

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

需要angular-sanitize

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

Gist Link