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 相关文章推荐
原生javascript兼容性测试实例
Jul 01 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
Vue.extend 编程式插入组件的实现
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读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
Python基于DES算法加密解密实例
2015/06/03 Python
django的settings中设置中文支持的实现
2019/04/28 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
python能做什么 python的含义
2019/10/12 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
Weblogc domain问题
2014/01/27 面试题
学生党支部先进事迹
2014/02/04 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
学校周年庆活动方案
2014/08/22 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP
详解非极大值抑制算法之Python实现
2021/06/28 Python
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫