92

阅读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>

问题是 borwser 将返回值显示为：

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

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

这是 JSFiddle 示例

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

是否可以针对此特定过滤器关闭此清理功能？

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

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

但这不是我想要的。

4

3 回答 3

113

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

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

您还需要导入 CSS（我猜是Bootstrap）才能在图标工作时看到它。

我提供了一个工作示例。

于 2012-11-06T14:02:37.170 回答
17

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

我认为这ng-class是您完成这项工作所需的指令，并且比渲染到类属性更安全。

在您的情况下，只需添加带有 id 字符串作为类和值作为评估表达式的对象字符串。

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

附带说明一下，您应该只使用指令（内置和自定义）来操作 html/dom，如果您需要更复杂的 html 渲染，您应该查看指令。

于 2013-10-04T08:41:34.033 回答
12

试试这个过滤器

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

需要角度消毒

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

要点链接

于 2015-07-16T18:55:17.807 回答