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的输出。 但是并不起作用,浏览器中显示的还是html代码。 【解决办法】 后来发现还需要通过通过$sce服务来实现html的展示。 angular.module(“list”,[]).controller(“BlogListCtrl”, BlogListCtrl).filter( ‘to_trusted’, [‘$sce’, function ($sce) { return function (text) { return $sce.trustAsHtml(text); } }] ) 这里通过$sce构建一个过滤器来对输出的html进行过滤 这样就可以通过AngularJS正常的输出html标签,并且被浏览器解析了 【总结】 以上就是这篇文章的全部内容了,希望这篇文章的内容对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。 您可能感兴趣的文章: 详解AngularJs中$sce与$sceDelegate上下文转义服务 深入理解AngularJS中的ng-bind-html指令和$sce服务 AngularJS 使用$sce控制代码安全检查 深究AngularJS中$sce的使用 angularjs $sce html 相关文章 AngularJS中scope的绑定策略实例分析 这篇文章主要介绍了AngularJS中scope的绑定策略,结合实例形式简单分析了AngularJS scope的三种绑定模式的使用方法与相关注意事项,需要的朋友可以参考下 2017-10-10 AngularJS 入门教程之HTML DOM实例详解 本文主要介绍AngularJS HTML DOM,这里帮大家整理了详细的资料,并附实例代码详细讲解,有需要的小伙伴可以参考下 2016-07-07 angular 组件通信的几种实现方式 这篇文章主要介绍了angular 组件通信的几种实现方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-07-07 angular2倒计时组件使用详解 这篇文章主要为大家详细介绍了angular2倒计时组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-01-01 Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法 今天小编就为大家分享一篇Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 Angular2 http jsonp的实例详解 这篇文章主要介绍了Angular2 http jsonp的实例详解的相关资料,希望通过本能帮助到大家,需要的朋友可以参考下 2017-08-08 Angular框架详解之视图抽象定义 这篇文章主要给大家介绍了关于Angular框架详解之视图抽象定义的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2021-04-04 使用Angular CLI生成路由的方法 这篇文章主要介绍了使用Angular CLI生成路由的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-03-03 angular学习之ngRoute路由机制 这篇文章主要介绍了angular学习之ngRoute路由机制,ngRoute是一个Module,提供路由和深层链接所需的服务和指令。有需要的可以了解一下。 2017-04-04 AngularJS实现DOM元素的显示与隐藏功能 这篇文章主要介绍了AngularJS实现DOM元素的显示与隐藏功能,涉及AngularJS中ng-hide与ng-show两个属性的使用,需要的朋友可以参考下 2016-11-11 最新评论

【问题描述】

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中$sce与$sceDelegate上下文转义服务
  • 深入理解AngularJS中的ng-bind-html指令和$sce服务
  • AngularJS 使用$sce控制代码安全检查
  • 深究AngularJS中$sce的使用
张贴在3