详解Angular.js数据绑定时自动转义html标签及内容


Posted in Javascript onMarch 30, 2017

angularJS在进行数据绑定时默认是以字符串的形式数据,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止html标签的注入攻击,但有时候需要,特别是从数据库读取带格式的文本时,无法正常的显示在页面中。

而要对html进行转义,则需要在数据绑定的html标签中使用ng-bind-html属性,该属性依赖与$sanitize,也就是需要引入angular-sanitize.js文件,并在module定义时注入该服务ngSanitize。比如:

html:

<span ng-controller = "myCtr" ng-bind-html = "htmlStr"></span>

javascript:

function myCtr($scope){

$scope.htmlStr = '<p style="color:white;background:#f60;"></p>';

};

这样可以实现html转义,但是有个问题是style这种标签会被angularJS认为是不安全的所以统统自动过滤掉,而为了保留这些就需要开启非安全模式。

如何让自动加载的数据转义html标签呢?实际上还有一种绑定方式:

html:

<div ng-repeat = "article in articles">

<div class="panel-heading">



<h4><b>{{article.title}}</b></h4>


</div>


<div class="panel-body">



<article id="word-display" ng-bind-html="article.content | trustHtml">



</article>


</div>

</div>

javascript:

success(function(data){

$scope.articles = data;

});

myApp.filter('trustHtml',function($sce){


return function(input){



return $sce.trustAsHtml(input);


}

});

其中$sce是angularJS自带的安全处理模块,$sce.trustAsHtml(input)方法便是将数据内容以html的形式进行解析并返回。将此过滤器添加到ng-bind-html所绑定的数据中,便实现了在数据加载时对与html标签的自动转义。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
Json解析的方法小结
Jun 22 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 #Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 #Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 #Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 #Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 #Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 #Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 #jQuery
You might like
认识并使用PHP超级全局变量
2010/01/26 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
php批量上传的实现代码
2013/06/09 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
Python实现文件按照日期命名的方法
2015/07/09 Python
使用python实现knn算法
2017/12/20 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
Python实现不规则图形填充的思路
2020/02/02 Python
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
文秘专业大学生求职信
2013/11/10 职场文书
审计主管岗位职责
2014/01/31 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python