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 相关文章推荐
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
通过javascript设置css属性的代码
Dec 28 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
React 组件间的通信示例
Jun 14 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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生成数组再传给js的方法
2014/08/07 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
vue-test-utils初使用详解
2019/05/23 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
python pygame模块编写飞机大战
2018/11/20 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
年会搞笑主持词串词
2014/03/24 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
离婚协议书范本2014
2014/10/27 职场文书
聚会通知怎么写
2015/04/23 职场文书
体育部部长竞选稿
2015/11/21 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript
Win11查看设备管理器
2022/04/19 数码科技
vue使用element-ui按需引入
2022/05/20 Vue.js