AngularJS通过$sce输出html的方法
更新时间：2016年09月22日 08:58:29 作者：yangnianbing110
不知道大家有没有发现在用AngularJS作为前端搭建个人博客的时候，发现用AngularJs输出html的时候，浏览器并不解析这些html标签，这里我们需要其显示angular输出的html能被浏览器解析怎么办呢？不知道Angularjs如何实现这种功能的通过这篇文章来看看吧。
【问题描述】
AngularJS的强大之处之一就是他的数据双向绑定功能----->ng-bind和针对form的ng-model
但在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签
AngularJS输出html的时候，浏览器并不解析这些html标签
通过api，发现通过指令 ng-bind-html来实现html的输出。
<div class="col-md-12 ng-binding" ng-bind-html="item.content ">
但是并不起作用，浏览器中显示的还是html代码。
【解决办法】
后来发现还需要通过通过$sce服务来实现html的展示。
angular.module("list",[]).controller("BlogListCtrl", BlogListCtrl).filter(
'to_trusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
}
}]
)
这里通过$sce构建一个过滤器来对输出的html进行过滤
<div class="col-md-12 ng-binding" ng-bind-html="item.content|to_trusted ">
这样就可以通过AngularJS正常的输出html标签，并且被浏览器解析了
【总结】
以上就是这篇文章的全部内容了，希望这篇文章的内容对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
本文主要介绍AngularJs expression,这里整理了详细的资料，并附示例代码，有兴趣的小伙伴可以参考下2016-09-09
本文给大家分享的是使用angularjs路由框架实现的一个简单页面跳转功能，非常的实用，也很详细，有需要的小伙伴可以参考下2017-02-02
这篇文章主要介绍了angular学习之动态创建表单的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
angular js的双向数据绑定，在开发中起到的作用灰常大，所以下面这篇文章主要给大家介绍了关于Angularjs中$apply及优化使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧2018-07-07
本篇文章主要介绍了Angular2数据绑定的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
如果大家希望在应用程序的创建工作中采取各类最佳实践，那么AngularJS也能够带来极大的助益。总而言之，这套框架的强大功能与特性永远不会让有着应用开发需求的朋友们失望2015-12-12
这篇文章主要介绍了AngularJS API之copy深拷贝详解及实例的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了angular 内存溢出的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了AngularJS的表单使用详解,在JS原有的基础上提供了更多与HTML交互的功能,需要的朋友可以参考下2015-06-06
深入理解AngularJS中的ng-bind-html指令和$sce服务
这篇文章给大家详细介绍了AngularJS中的ng-bind-html指令和$sce服务，对大家学习AngularJS具有一定参考借鉴价值，有需要都可以参考学习。2016-09-09
最新评论