angular将html代码输出为内容的实例
2019-01-21 12:02
811 查看
在前端与后台的撕逼中,很大一部分是因为数据的问题。使用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代码输出为内容的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- angular将html代码输出为内容
- AngularJS ng-bind-html 指令详解及实例代码
- PHP实例——输出安全的HTML代码
- 编写html表格输出的时候有时候会出现同一列连续出现两行或者是三行的数据内容一样,并且我们想将这些行合并起来,这个时候我们就需要以下这些代码
- Java发送带html标签内容的邮件实例代码
- django输出html内容的实例
- PHP实例——输出安全的HTML代码
- jQuery内容筛选选择器实例代码
- asp采集HTML内容常用代码,详讲正则采集
- asp.net实例代码protected override void Render(HtmlTextWriter
- 好的天气预报HTML代码实例
- aspx代码中直接产生该页面的html输出
- 单链表的基本操作,正序/逆序建表(尾插法/头插法)、计算单链表长度、输出单链表内容、插入、删除,给出完整代码
- python 解析html基础 HTMLParser库,方法,及代码实例
- Angular Module声明和获取重载实例代码
- 1-1-1html实例代码
- android通过okhttpClient下载网页内容的实例代码
- c# 自动转html 到stringbuilder 输出内容。
- java在html页面上正常输出xml文件内容
- 实例分析之用ASP编程实现网络内容快速查找的代码