详解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编程起步(第二课)
Jan 10 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
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 str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
使用Python监控文件内容变化代码实例
2018/06/04 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
python中if及if-else如何使用
2020/06/02 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
公司年会抽奖活动主持词
2014/03/31 职场文书
党员评议思想汇报
2014/10/08 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技