angularJS绑定数据中对标签转义的处理
来源:互联网 发布:手机淘宝如何切换账号 编辑:程序博客网 时间:2024/05/01 09:38
一、问题
默认情况下,angularJS绑定的数据为字符串文本,不会对其中包含的html标签进行转义生成格式化的文本。在实际工作时碰到接口返回的数据带有html格式时该如何处理。
二、解决办法
1、引入angular-sanitize.js文件,并在module定义时注入服务ngSanitize。(为了能使用ng-bind-html属性)
var myApp = angular.module('myApp', ['ngAnimate'])
2、创建一个filter
myApp.filter('trustHtml', function ($sce) { return function (input) { return $sce.trustAsHtml(input); }});//$sce是angularJS自带的安全处理模块,$sce.trustAsHtml(input)方法便是将数据内容以html的形式进行解析并返回。
3、将此过滤器添加到ng-bind-html所绑定的数据中,便实现了在数据加载时对于html标签的自动转义。
<div ng-repeat="item in list" > <div ng-bind-html="item.content |trustHtml"></div></div>
三、其他
本来到此,问题已经解决了。但是在实际运用中发现了另外一个小坑。某数据只在前端创建,在textarea里编辑完并保存后,从数据库里读出来的格式与创建时不一致。后来发现是由于textarea里的换行是\n指令控制,上传数据即为\n格式,读到html里后,需要把\n转换为<br>
,解决的办法依旧采用filter。
app.filter('ntobr', function(){ var filter = function(input){ return input.replace(/\n/g,"<\/br>").replace(/ /g," "); }; return filter;});//此过滤器将textarea里的\n和空格替换为html可以识别的标签
<div ng-repeat="item in list" > <div ng-bind-html="item.content | ntobr |trustHtml"></div></div>//在绑定数据时只需要同时加入两个过滤器即可
0 0
- angularJS绑定数据中对标签转义的处理
- Angularjs绑定数据时对html标签的转义
- 关于angularJS绑定数据时自动转义html标签
- 关于angularJS绑定数据时自动转义html标签
- 关于angularJS绑定数据时自动转义html标签
- 关闭Angularjs对HTML标签自动转义
- angularJS 中html 标签绑定样式,ng-class的使用
- AngularJS数据绑定中数据监控的机制说明
- php对用户输入数据的转义处理
- AngularJS中使用$.ajax绑定失败的处理方法
- AngularJS的双向数据绑定
- AngularJS简单的数据绑定
- AngularJS数据的双向绑定
- Oracle Like中对转义字符的的处理
- Oracle Like中对转义字符的的处理
- AngularJS中ng-options实现下拉列表的数据绑定
- 数据绑定到DataList中ItemTemplate的时候,对里面控件的处理
- datagrid中绑定需要处理的数据
- 数据结构:串
- Java--线程的先后执行顺序控制
- ACDream 1067 Triangles
- Python内置的字符串处理函数
- HDU 5742 It's All In The Mind 水题
- angularJS绑定数据中对标签转义的处理
- PHP中 D()和M()方法的区别
- gcc 内联汇编用法介绍
- 对抽象类和接口的理解
- 交叉排序
- CAFFE layers
- 图片选择方法、装置、图片处理方法和装置
- poj 2752 Seek the Name, Seek the Fame(kmp)
- Java并发编程:线程池的使用