angularjs – $sce.trustAsHtml与ng-bind-html

前端之家收集整理的这篇文章主要介绍了angularjs – $sce.trustAsHtml与ng-bind-html前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
为什么我不能这样做:
<div>{{data | htmlfilterexample}}</div>

什么时候,在过滤器内,我回来了:

return $sce.trustAsHtml(input);

使用< divng-bind-html =“data | htmlfilterexample”>< / div>无论过滤器返回输入还是$sce.trustAsHtml(input),都可以工作.

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

谢谢.

$sce.trustAsHtml()生成一个可以安全地使用ng-bind-html的字符串.你不要在字符串上使用该函数,那么ng-bind-html将会产生错误:[$sce:unsafe]尝试在安全上下文中使用不安全的值.所以$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)) || '');

关键的是,.text(http://api.jquery.com/text/)的ng-bind使用会导致正在显示的字符串的文本表示(忽略它是否可信赖).

虽然ng-bind-html使用.html(http://api.jquery.com/html/)导致html解释版本(如果通过getTrustedHtml()声明安全)

猜你在找的Angularjs相关文章