Question

为什么我不能这样做：

<div>{{data | htmlfilterexample}}</div>

在过滤器内部，我正在返回：

return $sce.trustAsHtml(input);

无论过滤器返回<div ng-bind-html="data | htmlfilterexample"></div>还是input，都可以使用$sce.trustAsHtml(input)。

我的印象是$sce使得HTML值得信任，并且该方法返回的输出不需要ng-bind-html。

感谢。

Answer 1

$sce.trustAsHtml()生成一个可以安全使用ng-bind-html的字符串。如果您不在字符串上使用该函数，那么ng-bind-html会产生错误：[$sce:unsafe] Attempting to use an unsafe value in a safe context.所以 $ sce不会消除ng-bind-html的需要它处理的字符串可以安全地使用它。

您遇到的具体问题在于ng-bind和ng-bind-html

之间的差异

使用{{}}相当于ng-bind。因此，查看ng-bind源代码（ng-bind-* source code），我们发现它使用了这个：

element.text(value == undefined ? '' : value);

虽然ng-bind-html除其他外，还会执行以下操作：

var parsed = $parse(attr.ngBindHtml);
element.html($sce.getTrustedHtml(parsed(scope)) || '');

关键点是ng-bind使用 .text （http://api.jquery.com/text/）会导致显示字符串的文本表示（忽略它是否值得信赖）。

ng-bind-html使用 .html （http://api.jquery.com/html/）会导致html解释版（如果{{1}声明安全}）

$ sce.trustAsHtml与ng-bind-html

1 个答案: