详解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入门教程(12) js对象化编程
Jan 31 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 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学习教程之第2天
2008/06/15 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
php多任务程序实例解析
2014/07/19 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
Python异常处理总结
2014/08/15 Python
Python实现的批量下载RFC文档
2015/03/10 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
自己使用总结Python程序代码片段
2015/06/02 Python
简单的Python调度器Schedule详解
2019/08/30 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
python属于解释型语言么
2020/06/15 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
酒店员工职业生涯规划
2014/02/25 职场文书
教师节倡议书
2014/08/30 职场文书
创业计划书之网吧
2019/10/10 职场文书
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers