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)

});

结果:

点击查看效果: http://plnkr.co/edit/3FBasliZTRjKs3jwTpoR?p=preview

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

表格第一行: 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里,保留了所有的属性和事件,这一行的内容不依赖于ngSanitize模块,$sce服务是内置的.

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

参考原文: https://docs.angularjs.org/api/ngSanitize/service/$sanitize

相关阅读: angular-ngSanitize模块-linky过滤器详解

完整代码: https://github.com/OOP-Code-Bunny/angular/tree/master/ngSanitize

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

angularjs 可以加入html标签方法------ng-bind-html的用法总结（2）的更多相关文章

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

    本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块.(这个模块需要加载angular-sanitize.js插件) 要学习这个服务,先要了解另一个指令: n ...

  2. Angularjs 的 ngInfiniteScroll 的使用方法

    Angularjs 的 ngInfiniteScroll 的使用方法 一.介绍 ngInfiniteScroll 是一个 AngularJS 的扩展指令,实现了网页的无限滚动的功能,也就是相当于页面滚 ...

  3. Asp.net 后台添加Meta标签方法

    Asp.net 后台添加Meta标签方法包括keywords,CSS.JS 下面是从Asp.net 后台添加CSS.JS.Meta标签的写法,我们这里写成函数方便以后使用.如果函数放在页面类中, Pa ...

  4. 过滤字符串html标签方法

    过滤字符串html标签方法,如果输入的过滤标签为“*”,那么给字符串加上p标签 public static string noTagHtml(string str, string tagname) { ...

  5. HTML5 Audio标签方法和函数API介绍

    问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...

  6. 禁止火狐浏览器缓存input标签方法

    禁止火狐浏览器缓存input标签方法 问题1:在火狐浏览器里,云平台的输入框.选项框.勾选框…填写之后按F5刷新页面,之前填的东西会保留着,其它浏览器不会火狐强制刷新用Ctrl + F5 浏览器自动保 ...

  7. Mybatis笔记 - SQL标签方法

    Mpper.xml映射文件中定义了操作数据库的sql,并且提供了各种标签方法实现动态拼接sql.每个sql是一个statement,映射文件是mybatis的核心. 一.内容标签 1.NamePlac ...

  8. Mybatis总结一之SQL标签方法

    ---恢复内容开始--- 定义:mapper.xml映射文件中定义了操作数据库的sql,并且提供了各种标签方法实现动态拼接sql.每个sql是一个statement,映射文件是mybatis的核心. ...

  9. MyBatis从入门到精通(第4章)：MyBatis动态SQL【foreach、bind、OGNL用法】

    (第4章):MyBatis动态SQL[foreach.bind.OGNL用法] 4.4 foreach 用法 SQL 语句中有时会使用 IN 关键字,例如 id in (1,2,3).可以使用 ${i ...

随机推荐

  1. 【贪心】【DFS】Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) C. Andryusha and Colored Balloons

    从任意点出发,贪心染色即可. #include<cstdio> #include<algorithm> using namespace std; int v[200010< ...

  2. Java多线程——ReentrantLock源码阅读

    上一章<AQS源码阅读>讲了AQS框架,这次讲讲它的应用类(注意不是子类实现,待会细讲). ReentrantLock,顾名思义重入锁,但什么是重入,这个锁到底是怎样的,我们来看看类的注解 ...

  3. Access转Sqlite的最简单的方法（不需要DB Manager）

    在网上查了很多方法,大部分都是需要DB Manager,但是DB Manager这个牛逼保护机制做得好,没有免费的注册码可用.还好下面有另一个办法实现Access转Sqlite: 首先要下载SQLit ...

  4. HashMap源码-Basic hash bin node

    /** * Basic hash bin node, used for most entries. (See below for * TreeNode subclass, and in LinkedH ...

  5. sql server博客

    SQLSERVER MSDN论坛 SQLSERVER 补丁博客 SQLSERVER中国研发中心 微软亚太区数据库技术支持组官方博客 PAUL的SQLSKILL网站 sqlsaturday网站 sqls ...

  6. 【spring data jpa】jpa中使用count计数方法

    spring data jpa中使用count计数方法很简单 直接在dao层写方法即可 int countByUidAndTenementId(String parentUid, String ten ...

  7. CMD_命令行

    一.bat执行一闪而过 最后一个end下一行,加PAUSE   二.cmd命令:不是内部或外部命令,也不是可运行的程序或批处理文件 解决: 需将路径先切换到system32下  cd c:\WINDO ...

  8. asp.net HttpModule和HttpHandler

    ASP.Net处理Http Request时,使用Pipeline(管道)方式,由各个HttpModule对请求进行处理,然后到达 HttpHandler,HttpHandler处理完之后,仍经过Pi ...

  9. HttpApplication理解

    HttpApplication对象是经由HttpApplicationFactory.GetApplicationInstance(并最终调用HttpRuntime.CreateNonPublicIn ...

  10. 想使用gevent、mysql、sqlalchemy实现python项目协程异步达到并发的效果

    如题,但是查看了很多资料,都说python这边的mysql不支持异步并发,只能阻塞进行,心塞30秒,暂时放弃这方面的研究 如果不操作数据库的化,比如请求url.操作文件,还是可以用gevent来异步实 ...