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

本篇主要讲解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="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>&lt;div ng-bind-html="myHtml"&gt;<br>&lt;/div&gt;</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>&lt;div ng-bind-html="trustHtml"&gt;<br>&lt;/div&gt;</pre></td>

      <td><div ng-bind-html="trustHtml"></div></td>

    </tr>

    <tr>

      <td>ng-bind</td>

      <td>不编译</td>

      <td><pre>&lt;div ng-bind="myHtml"&gt;<br>&lt;/div&gt;</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" 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)

});

结果:

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

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

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

　　　　　　

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

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

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

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

ngSanitize和$sce的更多相关文章

  1. [AngularJS] Html ngSanitize, $sce

    Safely render arbitrary HTML snippets by using ngSanitize and $sce. By default angularJS consider us ...

  2. angular ng-bind-html $sce.trustAsHtml

    使用ng-bind-html和$sce.trustAsHtml显示有html符号的内容   angularjs的强大之处之一在于它的双向数据绑定的功能,我们通常会使用data-ng-bind或者dat ...

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

    本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块. 要学习这个服务,先要了解另一个指令: ng-bing-html. 顾名思义,ng-bind-html和 ...

  4. angularjs 可以加入html标签方法------ng-bind-html的用法总结（2）

    angular-ngSanitize模块-$sanitize服务详解 本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块. 要学习这个服务,先要了解另一个指 ...

  5. angular源码分析：angular中入境检察官$sce

    一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...

  6. 5、AngularJS 直接绑定显示html （$sce、$sanitize服务）

    1.直接使用$sce服务(angularjs中:$sce.trustAsHtml($scope.snippet).html:ng-bind-html="snippet") 以下代码 ...

  7. $sanitize和$sce服务的使用方法

    var app =angular.module(‘myApp‘,[‘ngSanitize‘]); app.controller(‘ctrl‘,function($scope,$sce){ $scope ...

  8. AngularJs $sce 和 $sceDelegate 上下文转义

    $sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 严格的上下文转义服务 严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模 ...

  9. AngularJS 使用$sce控制代码安全检查

    由于浏览器都有同源加载策略,不能加载不同域下的文件.也不能使用不合要求的协议比如file进行访问. 在angularJs中为了避免安全漏洞,一些ng-src或者ng-include都会进行安全校验,因 ...

随机推荐

  1. 「post中文参数问题」以及「验证码自动识别备忘」

    前言 之前搞过几次模拟登录,都是模拟 post 后取到 cookie,之后便能用这个 cookie 愉快玩耍.这次碰到了验证码,其实只需手动登录一次,手动取到 cookie 后也能玩耍,不过 cook ...

  2. 用于科学计算的Python库

    Matplotlib NumPy Pandas SciPy SymPy

  3. mybatis一对多关联

    这里的一对多指的是:当我们查询一个对象的时候,同时将其有关联的多方对象都查询出来. 下面以国家(Country)和部长(Minsiter)做案例 一个国家有多个部长 1.定义实体 定义实体的时候需要注 ...

  4. MySQL性能优化

    当今数据库的操作越来越成为整个应用的性能瓶颈,特别是Web应用更加明显.当我们设计数据库和对数据库操作时,都要考虑到性能. 1.优化查询语句,方便查询缓存 大多数MySQL服务器都开启了查询缓存,这是 ...

  5. html种种

    DIV+CSS如何让文字垂直居中?--https://zhidao.baidu.com/question/69214815.html

  6. 学习ASP.NET 5和MVC6

    今天很荣幸的参加了微软开源跨平台讲座,充分认识了下一个版本的ASP.NET所带来的激动人心的特性.虽然过去已经断断续续的了解了一些ASP.NET5和MVC6与EF7的动态,但是都没有这一次来的系统化( ...

  7. [fiddler] 使用fiddler script自定义代理规则

    场景 fiddler作为调试代理工具,可以捕获电脑与互联网之间所有http通讯. 通过可视化操作或命令行可以按某些规则截获特定请求并修改,但当我们需要批量对请求进行更复杂的逻辑操作时,则不是很方便. ...

  8. 进度条投票-W

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. Python 随机数用法

    1. random.seed(int) 给随机数对象一个种子值,用于产生随机序列. 对于同一个种子值的输入,之后产生的随机数序列也一样. 通常是把时间秒数等变化值作为种子值,达到每次运行产生的随机系列 ...

  10. IIS配置MP3/MP4/OGG/flv等资源文件访问

    配置过程参考:http://www.cnblogs.com/EasonJim/p/4752399.html 以下包含了mp4的mime类型: 323 text/h323 acx application ...