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 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
JavaScript实现捕获鼠标坐标
Apr 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
两种php调用Java对象的方法
2006/10/09 PHP
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
jquery uaMatch源代码
2011/02/14 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
校长先进事迹材料
2014/02/01 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
公益广告标语
2014/06/19 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
优秀团员事迹材料
2014/12/25 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL