$ sce.trustAsHtml与ng-bind-html

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-*源代码),我们看到它使用了这个:

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解释的版本(如果宣布为安全的getTrustedHtml())