如何创build输出HTML的angularjsfilter

在阅读AngularJS教程第9步之后，我创build了自己的AngularJSfilter，它应该将布尔数据转换为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的例子

我认为在这个过程中会发生一些卫生问题。

这个特定的filter可以closures这个消毒吗？

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

 <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（ 引导我猜），以便能够看到图标时，它的工作。

我提供了一个工作的例子 。

Answer 2

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

我认为ng-class是你为这个工作所需要的指令，然后渲染成class属性更安全。

在你的情况下，只需添加对象string的idstring作为类和值作为评估expression式

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

在一个侧面说明，你应该只使用指令（内置和自定义）来操纵HTML / DOM，如果你需要一个更复杂的HTML渲染，你应该看指令，而不是

Answer 3

试试这个filter

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

Gist链接