关于angularJS绑定数据时自动转义html标签
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:red;font-size=18px;"></p>';
};
如此则可以实现html转义,但有个问题就是style这种标签会被angularJS认为是不安全的所以统统自动过滤掉,而为了保留这些就需要开启非安全模式。
但我遇到的问题不止这些,以上只是静态的去绑定,而我自己开发的页面是通过自定义service中的$http异步加载获取数据, 然后在success事件中为$scope绑定数据列表,而在模板中则使用<div ng-repeat="article in articles">...</div>由angularJS自动循环生成,那么问题来了,如何让自动加载的数据转义html标签呢。
这两天从directive指令、filter过滤器到$sanitize、$complie几乎都试了一遍,不过因为一直没有注 意到关键的一点所以始终没有实现。后来发现(还是偶然读的一篇blog),ng-bind-html中也是可以绑定循环时的数据的,也就是之前我一直以为 ng-bind-html中只可以绑定在后端$scope中定义的变量,也就是类似上面提到的那个例子,而实际上是可以这么绑定的:
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标签的自动转义。
转自;http://okashii.lofter.com/post/1cba87e8_29e0fab
转载于:https://www.cnblogs.com/herozhi/p/5750125.html
关于angularJS绑定数据时自动转义html标签相关推荐
- angularjs2 html转义,详解Angular.js数据绑定时自动转义html标签及内容
angularJS在进行数据绑定时默认是以字符串的形式数据,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止html标签的注入攻击,但有时候需要,特别是从数据库读取带格式的文本 ...
- 向mysql表中插入/更新数据时自动添加创建时间/更新时间
目录 处理方式一:修改数据库字段类型 测试插入数据: 测试更新数据: 处理方式二:配置生成策略 [MySQL版本] 8.x 处理方式一:修改数据库字段类型 自动添加创建时间: 将字段类型设置为TIME ...
- Android 自动向上滚动,android – Recyclerview在插入数据时自动向上滚动
我遇到了一个问题,当我将数据添加到数组列表然后将其添加到适配器之后,当我将其设置为recycleler视图适配器时,它会自动跳转到顶部我如何能够阻止它,就像我想在虚拟空间中添加数据一样我也尝试过使用 ...
- WP8.1开发中复杂JSON绑定数据时的方法
如果要绑定要一个集合中的另一个集合,比如这样的JSON: 1 public class GetTransferInfo 2 { 3 public class Segment 4 { 5 public ...
- GridView批量删除页面最后N条数据时自动翻到上一页问题
删除选中数据 protected void lbtnDelSeleted_Click(object sender, EventArgs e) { CQ_Music myMusi ...
- 如何实现插入数据时自动更新另外一个表的内容
1事务:在程序中,将插入代码和更新代码包裹在一个事务里,失败后回滚,保证同时成功同时失败. 2存储过程:在数据库写存储过程,存储过程里面代码包裹在事务里,失败后回滚. 3触发器: SET ANSI_N ...
- 解决winform combobox绑定数据时触发changed事件
我们在使用comboBox组件时如果同时设置了SelectedIndexChanged事件,在绑定combobox事件时会先触发一下changed事件,怎么能在绑定时不触发,再绑定之后的用户选择触发呢 ...
- SAP Spartacus table里显示较长数据时自动显示省略号的设置
如下图所示:当table cell的值较长无法完整显示时,右部的值会被截断,以省略号代替. 这个行为是通过.scss里text-overflow: ellipsis设置实现的: 在Chrome开发者工 ...
- mysql 插入数据时 自动设置创建时间和更新时间
一般除了配置表,表中都会有create_time ,update_time 2个字段,而这个2个字段测处理方式雨2种: 1在代码中设置当前日期 2>mysq自动设置(推荐使用) 加入,已经设置好 ...
- mysql查询数据时自动生成序号
写法一 SET @rownum = 0; SELECT @rownum := @rownum +1 AS rownum ,v.id ,v.create_time FROM vehiclegas v O ...
最新文章
- as查看SHA1和MD5
- 最近面试Java后端开发的感受
- oracle nodemanage,Linux 下Weblogic集群搭建-04通过nodemanage进行节点的启动与关闭
- 云服务器镜像麻烦吗_简单说说云服务器的镜像功能作用
- wincc 服务器共享文件夹,wincc共享文件夹Simatic Shell中项目的互连是什么意思-工业支持中心-西门子中国...
- [moka同学笔记]linux服务器防火墙的设置
- 谷粒商城--API三级分类--网关统一配置跨域
- ieee802.11数据radiotap介绍
- 为什么黑客都用python-为什么如此多的黑客都用python?
- BeautifulSoup实现博文简介与过滤恶意标签(xxs攻击)
- SVN 分支主干的合并
- stata中计算公式命令_stata 计算命令:
- 看《李开复先生谈创新思维》
- python摇骰子游戏小案例
- Oracle 执行计划(Explain Plan)
- C/C++代码静态分析工具调研
- 易迅网被指私自改促销订单 用户下单后被取消
- html滚动字幕js,js 实现滚动字幕
- JavaScript 课堂练习 随机点名,被点过的名字不再出现
- MXC智能物联竞价-基于AI的物联网通证化协议分析
热门文章
- What's New in Qt 5.5 5.4,以及5.5 所有module
- 转-PHP 设计模式 之策略模式 应用场景 Strategy Pattern
- 【转】某女生编的c语言程序
- spring-data-slor 通配符的匹配很全面, 但无法找到元素 'solr:solr-server' 的声明。
- loadrunner中面向目标场景的设计
- 新版chrome移动端踩坑
- es6 模板字变量和字符串占位符
- 2017.6.26 接口测试工具postman使用总结
- fork 与 vfork
- MYSQL 4种插入数据的方式比较