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 相关文章推荐
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
vuex入门最详细整理
Mar 04 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
vue实现日历表格(element-ui)
Sep 24 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
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php的4种常见运行方式
2015/03/20 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
了解重排与重绘
2019/05/29 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
python实现复制整个目录的方法
2015/05/12 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
使用django实现一个代码发布系统
2019/07/18 Python
使用python实现kNN分类算法
2019/10/16 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
利用python生成照片墙的示例代码
2020/04/09 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
大学生两会学习心得体会
2014/03/10 职场文书
校本课程教学计划
2015/01/19 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
python中filter,map,reduce的作用
2022/06/10 Python
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS