AngularJS通过$sce输出html的方法


Posted in Javascript onSeptember 22, 2016

【问题描述】

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标签,并且被浏览器解析了

【总结】

以上就是这篇文章的全部内容了,希望这篇文章的内容对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
JavaScript中的Document文档对象
Jan 16 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
js星星评分效果
Jul 24 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 #Javascript
D3.js实现雷达图的方法详解
Sep 22 #Javascript
javascript函数中的3个高级技巧
Sep 22 #Javascript
JavaScript省市区三级联动菜单效果
Sep 21 #Javascript
Angular2 环境配置详细介绍
Sep 21 #Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 #Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 #Javascript
You might like
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
php微信开发接入
2016/08/27 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
js prototype截取字符串函数
2010/04/01 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
理解javascript对象继承
2016/04/17 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
Vue filter介绍及其使用详解
2017/10/21 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
小学生母亲节演讲稿
2014/05/07 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
2016年党员承诺书范文
2016/03/24 职场文书