一尘不染

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

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>

问题是浏览器将返回值按字面显示为:

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

而不是应显示的图标(或呈现的html)。

这是JSFiddle示例

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

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

我也知道如何通过不从过滤器返回HTML输出而是显示“确定”或“删除”文本来显示图标,然后将其替换为:

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

但这不是我想要的。


阅读 223

收藏
2020-07-04

共1个答案

一尘不染

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

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

您还需要导入CSS(我猜是Bootstrap),以便在工作时可以看到该图标。

我提供了一个有效的例子

2020-07-04