angular将html代码输出为内容的实例


Posted in Javascript onSeptember 30, 2018

在前端与后台的撕逼中,很大一部分是因为数据的问题。使用angular会遇到这样的问题,后台返回的数据不是自己想要的纯字符串,而是带有html标签及属性的,那么我们将它输出来后,在页面上就出现了带有标签的内容,很不优雅。那么找后台更改的话,又会引起议论撕逼大战,而且人家不一定有时间搭理你。这样的情况下,我们就要自己动手,丰衣足食了。

通常angular绑定数据有这样的方法,{{}}或者ng-bind =”,此时数据为带有html标签的数据的话,那么就输出为带有标签的数据,不友好。

如何更改呢?

方法一

要输出为不带html的内容,需要两步

1 使用$sce.trustAsHtml();方法将数据转为unwrapTrustedValue 数据。

$scope.aaa = $sce.trustAsHtml("<h3>html代码</h3>");

2 ng-bind-html 输出

<div ng-bind-html='aaa'></div>

方法二 filter过滤器

基于$sce.trustAsHtml()的方法,构造过滤器来进行过滤。

angular.module('app',[]).filter("showAsHtml",function($sce){
 return funciton(input){
  retrun $sce.trustAsHtml(input);
 }
});

使用的时候直接在数据后加过滤器即可

<div ng-bind-html='bbb|showAsHtml'></div>

使用了$scr.trustAsHtml() 则展示的时候,必须使用ng-bind-htm=‘'的形式,而不能使用{{}}

以上这篇angular将html代码输出为内容的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
javascript实现行拖动的方法
May 27 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 #Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 #Javascript
vue  自定义组件实现通讯录功能
Sep 30 #Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 #Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 #Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 #Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 #Javascript
You might like
收音机的保养
2021/03/01 无线电
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
PHP学习笔记之一
2011/01/17 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
Python获取邮件地址的方法
2015/07/10 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
python新手学习使用库
2020/06/11 Python
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
工作自荐信
2013/12/11 职场文书
小学生考试获奖感言
2014/01/30 职场文书
公司员工手册范本
2015/05/14 职场文书
初中军训感想
2015/08/07 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android