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 相关文章推荐
最常用的12种设计模式小结
Aug 09 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 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绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
php常用hash加密函数
2014/11/22 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
python保存字符串到文件的方法
2015/07/01 Python
python3中的md5加密实例
2018/05/29 Python
详解python while 函数及while和for的区别
2018/09/07 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
机关门卫岗位职责
2013/12/30 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL