（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. 《----css样式---------浮动带来的影响与解决方法---------------》

    浮动就是让我们的元素脱离标准文档流,目的是为了布局好看! 浮动的现象: 脱离标准文档流被叫做脱流,同时会出现字围现象. 浮动的元素会相互贴靠,而且如果父容器空间足够大,则浮动的元素会正常紧靠也就是后一 ...

  2. [LeetCode] Duplicate Emails 重复的邮箱

    Write a SQL query to find all duplicate emails in a table named Person. +----+---------+ | Id | Emai ...

  3. Linux 中 SVN 重启关闭

    a.启动SVN svnserve -d -r /A/B/svn/ 其中 -d 表示守护进程, -r 表示在后台执行 /A/B/svn/ 为svn的安装目录 b.关闭SVN 这里采取linux杀死进程的 ...

  4. Tower是个不错的项目管理开放平台

    简单,易用,轻量级,挺多大项目都在用. 目前公司的项目也在使用,但是从高层到底下,随意惯了,最终没有用起来. 感觉适合年轻激情的创业公司团队来使用. 附上地址:https://tower.im/

  5. 【wpf】缓存

    1.引用 System.Runtime.Caching 2.源 msdn //实例化MemoryCache类 ObjectCache cache = MemoryCache.Default; //读取 ...

  6. REDIS持久化报错失败

    redis log报错: [7666] 15 Jan 00:22:36.028 # Error moving temp DB file on the final destination: Invali ...

  7. UDP Server

    //UDP服务器端程序,可以接受广播,不可接受多播,多播需要join播地址@Override public void run() { while (true) { try { DatagramSock ...

  8. [转]ExtJs入门之filefield：文件上传的配置+结合Ajax完美实现文件上传的asp.net示例

    原文地址:http://www.stepday.com/topic/?459 作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的. ...

  9. 开源遥感平台opticks插件开发指南

    Opticks是一款开源的遥感数据处理平台,与其同类开源软件OSSIM一样,支持种类丰富的数据文件格式,但其最大特点为设计精巧的插件开发模式,在设计技巧上,系统提供了良好的封装特性,即使插件开发者对框 ...

  10. 本地显示svg正常显示，在工程项目中无法正常显示

    提前说明:此文仅记录个人项目问题,不具有众参考意义. 原因: 工程中对引用的资源进行解析设置,即resource设置. 解决方法: 找到静态资源加载路径,添加 if(urlpostfix.equals ...