$ sce.trustAsHtml与ng-bind-html

Why can't I do this:

为什么我不能这样做：

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

When, inside the filter, I am returning:

当我在过滤器内部返回时：

return $sce.trustAsHtml(input);

Using <div ng-bind-html="data | htmlfilterexample"></div> works regardless if the filter returns input or $sce.trustAsHtml(input).

无论过滤器是否返回输入或$ sce.trustAsHtml（输入），使用

都有效。

I was under the impression that $sce makes HTML trustworth and ng-bind-html isn't needed for output returned by that method.

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

Thanks.

谢谢。

1 个解决方案

#1

$sce.trustAsHtml() produces a string that is safe to use with ng-bind-html. Were you to not use that function on the string then ng-bind-html would yield the error: [$sce:unsafe] Attempting to use an unsafe value in a safe context. So $sce doesn't get rid of the need for ng-bind-html rather it makes the string it processes safe to use with it.

$ sce.trustAsHtml（）生成一个可以安全地与ng-bind-html一起使用的字符串。如果你不在字符串上使用该函数，那么ng-bind-html会产生错误：[$ sce：unsafe]试图在安全的上下文中使用不安全的值。所以$ sce并没有摆脱对ng-bind-html的需求，而是让它使用它的过程安全的字符串。

The specific issue you're running into lies in the difference between ng-bind and ng-bind-html

您遇到的具体问题在于ng-bind和ng-bind-html之间的区别

Using {{}} is the equivalent of ng-bind. So, looking at the ng-bind source code (ng-bind-* source code) we see that it uses this:

使用{{}}相当于ng-bind。所以，看一下ng-bind源代码（ng-bind- *源代码），我们看到它使用了这个：

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

while ng-bind-html, amongst other things, does the following:

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

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

The key takeaway being that the ng-bind use of .text (http://api.jquery.com/text/) results in the text representation of the string being displayed (ignoring whether it's HTML trustworthy).

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

While the ng-bind-html use of .html (http://api.jquery.com/html/) results in the html interpreted version (if declared safe by getTrustedHtml())

使用.html（http://api.jquery.com/html/）的ng-bind-html导致html解释版本（如果getTrustedHtml（）声明安全）

#1