angular-ngSanitize模块-$sanitize服务详解


Posted in Javascript onJune 13, 2017

本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块.

要学习这个服务,先要了解另一个指令: ng-bing-html.

顾名思义,ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html().

但是,出于安全考虑,如果我们直接使用ng-bind-html是会报错的,ng-bind-html后面的内容必须经过一定的处理.

处理的方式有两种,一种是使用$sce服务,另一种就是使用$sanitize服务.$sce服务怎么用,在以后的文章中会独立讲解,这篇主要讲解$sanitize服务.

$sanitize会根绝一个白名单来净化html标签.这样,不安全的内容就不会被返回. 白名单是根据$compileProvider的aHrefSanitizationWhitelist和imgSrcSanitizationWhitelist函数得到的.

看一个栗子:

html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
 <title></title>
 <meta charset="utf-8">
 <script src="../angular-1.3.2.js"></script>
 <script src="angular-sanitize.min.js"></script>
 <script src="script.js"></script>
 <link type="text/css" href="../bootstrap.css" rel="external nofollow" rel="stylesheet" />
</head>
<body>
<div class="container">
 <table class="table table-bordered" ng-controller="ctrl">
  <caption>通过ngSanitize模块的$sanitize服务解析html</caption>
  <thead>
  <tr>
   <th>使用的指令</th>
   <th>格式化方法</th>
   <th>指令的写法</th>
   <th>解析结果</th>
  </tr>
  </thead>
  <tbody>
  <tr>
   <td>ng-bind-html</td>
   <td>使用内置的$sanitize <br/>(不需要出现在js里,只要模型添加了ngSanitize模块, <br/>然后使用ng-bind-html,它的值就自动通过$sanitize编译)</td>
   <td><pre><div ng-bind-html="myHtml"><br></div></pre></td>
   <td><div ng-bind-html="myHtml"></div></td>
  </tr>
  <tr>
   <td>ng-bind-html</td>
   <td>使用$sce的trustAsHtml方法编译<br/>(以后会细讲$sce服务,这里不是重点)</td>
   <td><pre><div ng-bind-html="trustHtml"><br></div></pre></td>
   <td><div ng-bind-html="trustHtml"></div></td>
  </tr>
  <tr>
   <td>ng-bind</td>
   <td>不编译</td>
   <td><pre><div ng-bind="myHtml"><br></div></pre></td>
   <td><div ng-bind="myHtml"></div></td>
  </tr>
  </tbody>
 </table>
 <a class="btn btn-default" href="http://plnkr.co/edit/3FBasliZTRjKs3jwTpoR?p=preview" rel="external nofollow" role="button">plunker</a>
</div>
</body>
</html>

js:

var app =angular.module('myApp',['ngSanitize']);
app.controller('ctrl',function($scope,$sce){
  $scope.myHtml = '<p style="color:blue">an html\n' +
  '<em onclick="this.textContent=\'code_bunny\'">click here</em>\n' +
  'snippet</p>';
  $scope.trustHtml = $sce.trustAsHtml($scope.myHtml)
});

结果:

angular-ngSanitize模块-$sanitize服务详解

下面来具体说明一下这个栗子:

表格第一行: myHtml是一段字符串,但是它的内容是一段html,使用ng-bind-html可以把它作为元素的.html()绑定给元素.在这里我们给模块添加依赖 'ngSanitize' ,(需要链入angular-sanitize.min.js).然后使用ng-bind-html,$sanitize会自动对myHtml进行净化.

所以我们看到结果,myHtml是被作为html填充到div里面的,但是不再是原来的myHtml,而是这样的:

angular-ngSanitize模块-$sanitize服务详解

可以看到,$sanitize会把标签的属性都移除,以及绑定在元素上的事件.仅保留了标签和内容.

*记住,$sanitize指令本身不会出现在js代码里.直接使用ng-bind-html就行了.但如果这里不给模块添加依赖ngSanitize,是会报错的.

表格第二行: trustHtml 是myHtml通过$sce.trustAsHtml() 处理以后的返回值.所以它不再经过$sanitize服务的净化.直接作为元素的.html()绑定给元素,所以我们看到myHtml被完整的填充到了div里,保留了所有的属性和事件,这一行的内容不依赖于ngSanitize模块,$sce服务是内置的.

表格第三行: 不使用ng-bind-html指令.当使用ng-bind指令时,绑定的值就作为字符串填充到元素里,这个没什么好讲的.

完整代码: https://github.com/OOP-Code-Bunny/angular/tree/master/ngSanitize

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
angularJS中$apply()方法详解
Jan 07 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
js实现全选和全不选
Jul 28 Javascript
微信小程序实现多张图片上传功能
Nov 18 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 #Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 #jQuery
Javascript实现的StopWatch功能示例
Jun 13 #Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 #Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 #Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 #Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 #Javascript
You might like
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
再探JavaScript作用域
2014/09/24 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
jquery实现树形菜单完整代码
2015/12/29 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
十八大闭幕感言
2014/01/22 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
实习协议书
2015/01/27 职场文书
基于Python实现一个春节倒计时脚本
2022/01/22 Python
nginx容器方式反向代理实战
2022/04/18 Servers