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 相关文章推荐
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
vue通过过滤器实现数据格式化
Jul 20 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
电气专业推荐信范文
2013/11/18 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python