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 相关文章推荐
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
javascript实现在线客服效果
Jul 15 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
JS代码编译器Monaco使用方法
Jun 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实现的轻量级简单爬虫
2015/07/08 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
Python原始套接字编程实例解析
2020/01/29 Python
Python运行异常管理解决方案
2020/03/09 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python可以实现栈的结构吗
2020/05/27 Python
快速创建python 虚拟环境
2020/11/28 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
幼儿园长自我鉴定
2013/10/17 职场文书
党员承诺书范文
2014/05/19 职场文书
上课随便讲话检讨书
2014/09/12 职场文书