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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
基于JQuery的cookie插件
Apr 07 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
回顾Javascript React基础
Jun 15 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 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的5个安全措施小结
2012/07/17 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
Python中操作符重载用法分析
2016/04/29 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
django API 中接口的互相调用实例
2020/04/01 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
行政执法作风整顿剖析材料
2014/10/11 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
班主任开场白
2015/06/01 职场文书
单位综合评价意见
2015/06/05 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js