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. [CF160D]Edges in MST

    [CF160D]Edges in MST 题目大意: 一个\(n(n\le10^5)\)个点,\(m(m\le10^5)\)条边的连通图.对于图中的每条边,判断它与该图最小生成树的关系: 在该图所有的 ...

  2. AngularJS的加载执行过程

    1. HTML页面的加载,这会触发加载页面包含的所有JS (包括 AngularJS) 2. AngularJS启动,搜寻所有的指令(directive) 3. 找到ng-app,搜寻其指定的模块(M ...

  3. Android UI Material Design

    Material Design 中文版: http://wiki.jikexueyuan.com/project/material-design/ Material Design开发文章系列1:App ...

  4. [转] Matlab与C++混合编程，添加OpenCV库

    原文地址 峰回璐转 最近在做运动医学软件优化工作,此款软件框架及算法语言全由matlab实现,虽然matlab矩阵运算.数值计算能力强大,但速度让人难以忍 受.软件立刻移植到C++上又不太实际,故采用 ...

  5. zip压缩与解压文件夹或文件

    import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import ...

  6. VBA数组

    基础用法,这篇写的不错:https://www.cnblogs.com/wuzhiblog/p/7137578.html

  7. Jigsaw 项目：Java 模块系统新手引导

    前言 随着 2017 年 10 月 Java 9 的发布,Java 能够使用模块系统了,但是中文互联网上的资料太少,许多关于 Java 模块系统的文章都只是介绍了模块系统的好处,或者给了一些毫无组织的 ...

  8. Java笔记1：IntelliJ IDEA详细安装步骤

    安装IntelliJ IDEA 一.安装JDK 1 下载最新的jdk,这里下的是jdk-8u66 2 将jdk安装到默认的路径C:\Program Files\Java目录下 二.安装IntelliJ ...

  9. Yii2系列教程三：Database And Gii

    上一篇文章我们理了一下Yii2的MVC,Forms和Layouts,这篇文章就直接按照约定来说说Yii2与数据库相关的一些事情,如果你觉得不够的话,不急,更具体的用法我会在后续的教程给出,并且这里也会 ...

  10. Solr删除数据

    步骤: 1.在Solr客户端左下方 Core Selector 中点选想要删除数据的索引库 2.点选Documents 3.右侧Document Type中点选XML 4.Document(s)中输入 ...