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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
使用node.js搭建服务器
May 20 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 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
用 PHP5 轻松解析 XML
2006/12/04 PHP
PHP ajax 分页类代码
2008/11/13 PHP
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
数控专业毕业生求职信范文
2013/09/21 职场文书
技术合作协议书范本
2014/04/18 职场文书
计算机求职信
2014/07/02 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
在python中读取和写入CSV文件详情
2022/06/28 Python