如何创建angularjs滤波器，可输出HTML [英] How to create angularjs filter which outputs HTML

问题描述

AngularJS教程一步9 后
我已经创建了自己的AngularJS过滤器，这应该布尔数据转换成HTML。

After reading AngularJS tutorial step-9 I have created my own AngularJS filter, which should convert boolean data into html.

下面是我的过滤器code：

Here is my filter code:

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 code：

Here is my HTML code:

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

问题在于borwser显示返回值字面上

The problem is that borwser displays returned value literally as:

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

不是应该出现的图标（或呈现的HTML）。

not as icons (or rendered html) that should appear.

这里的jsfiddle例如

我认为，在此过程中会产生一些禁制。

I think that some sanitisation occurs during this process.

是否有可能把这种消毒关闭这个特定的过滤器？

Is it possible to turn this sanitization off for this specific filter?

我也知道如何通过不返回从过滤器HTML输出到显示图标而只是OK或删除的文字，我可以再替换为：

Also I know how to display icons by not returning HTML output from filter but rather just 'ok' or 'remove' text which I can then substitute to:

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

但是这不是我想要的。

but this is not what I want.

推荐答案

您应该使用 NG-绑定-HTML 指令（需要导入的sanitize模块和js文件）：
<一href=\"https://docs.angularjs.org/api/ng/directive/ngBindHtml\">https://docs.angularjs.org/api/ng/directive/ngBindHtml

You should use the ng-bind-html directive (require to import the sanitize module and js file): https://docs.angularjs.org/api/ng/directive/ngBindHtml

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

您还需要导入CSS（引导我猜）才能看到该图标时，它的作品。

You also need to import the CSS (Bootstrap I guess) to be able to see the icon when it works.

我提供了一个工作示例。

这篇关于如何创建angularjs滤波器，可输出HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！