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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 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 中文乱码解决办法总结分析
2009/07/30 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
详解jquery和vue对比
2019/04/16 jQuery
优雅地使用loading(推荐)
2019/04/20 Javascript
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
Python模拟登陆实现代码
2017/06/14 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
django的settings中设置中文支持的实现
2019/04/28 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
法律系毕业生求职信
2014/05/28 职场文书
金融保险专业求职信
2014/09/03 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
小学运动会入场口号
2015/12/24 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
python3实现常见的排序算法(示例代码)
2021/07/04 Python
nginx 配置缓存
2022/05/11 Servers