详解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 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
关于JavaScript的一些看法
May 27 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 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函数
2006/10/09 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
php事务处理实例详解
2014/07/11 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
Python类的专用方法实例分析
2015/01/09 Python
举例讲解Python中is和id的用法
2015/04/03 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
python中import reload __import__的区别详解
2017/10/16 Python
给我一面国旗 python帮你实现
2019/09/30 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
园林设计师自荐信
2013/11/18 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
好的旅游活动方案
2014/08/19 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
2014年医务科工作总结
2014/12/18 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
详解nginx进程锁的实现
2021/06/14 Servers
SQL 聚合、分组和排序
2021/11/11 MySQL