详解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 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
vue router 配置路由的方法
Jul 26 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
微信小程序class封装http代码实例
Aug 24 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 判断常量,变量和函数是否存在
2009/04/26 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
php的ddos攻击解决方法
2015/01/08 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
Python闭包思想与用法浅析
2018/12/27 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
库房主管岗位职责
2013/12/31 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL