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

读后 我已经创建了自己的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>';
    }
});

angular.module（'phonecatFilters'，[]）.filter（'iconify'，function（）{//mycustomfilter
返回函数（输入）{
返回输入？“”：“”；
}
});

以下是我的HTML代码：

<dt>Infrared</dt>
  <dd>{{phone.connectivity.infrared | iconify }}"></dd>

红外 {{phone.connectivity.infrared}}> 问题在于borwser按字面意思显示返回值：

<i class="icon-ok"></i>

不是应该显示的图标（或呈现的html）

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

是否可以关闭此特定过滤器的消毒

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

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

---

但这不是我想要的。

您应该使用

ng bind html

指令（需要导入消毒模块和js文件）：

您还需要导入CSS（我猜），以便能够在图标工作时看到它

---

我提供了一个。

除非我读错了，否则你是以错误的方式接近的

我认为ng类是这项工作所需的指令，比呈现到类属性更安全

在您的例子中，只需添加对象字符串，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);
  }
}]);

需要

---

这是我所知道的使用angularJS输出原始html的唯一方法，并且这种绑定只允许在属性上使用，因此您没有太多选择，您可以编写自己的指令来接受注释或元素绑定，以bind html的源代码为起点：指令可能是这里最好的解决方案，但它并不短比您的解决方案更重要；）需要注意的一点是，您需要包含

angular sanitize.js

文件才能使其正常工作。如果您想在不包含此额外库的情况下执行相同操作，可以使用

ng bind html unsafe

指令。angular 2.x会删除

ng html bind unsafe

，并要求html内容明确t标记为“安全”-请参阅：应该有一个默认的筛选器html_safe:

{{{myContent | myFilter | html_safe}

很好的解决方案。或者做得简单一点：

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

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