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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
比较简单的异步加载JS文件的代码
Jul 18 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
js实现鼠标拖曳效果
Dec 30 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
PHPMailer安装方法及简单实例
2008/11/25 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
PHP排序算法类实例
2015/06/17 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
php微信开发之谷歌测距
2018/06/14 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
vue实现计步器功能
2019/11/01 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
python self,cls,decorator的理解
2009/07/13 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
Python守护进程实现过程详解
2020/02/10 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
自荐信写法介绍
2014/01/25 职场文书
幼儿评语大全
2014/04/30 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
分享7个 Python 实战项目练习
2022/03/03 Python
Python利用zhdate模块实现农历日期处理
2022/03/31 Python
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android