angular不推荐大家在绑定数据的时候绑定html,但是如果你非要这么干也并不是不可以的。举个例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>指令</title>

</head>

<body ng-app ng-init="username='<h1>shit</h1>'">

<!--ng-bind指令在绑定的值包含html时会转义,为了安全(跨站脚本攻击)-->

<strong ng-bind-html="username"></strong>

<script src="app/bower_components/angular/angular.js"></script>

</body>

</html>

　　写这样的一段代码在浏览器运行：

会看到错误信息：

看意思是在一个安全的环境中使用了不安全的值导致的，这个时候我们需要引入angular的一个依赖包 angular-sanitize：

引入完成后我们导入项目,然后在模块中写明依赖:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>指令</title>

</head>

<body ng-app="myApp" ng-init="username='<h1>shit</h1>'">

<!--ng-bind指令在绑定的值包含html时会转义,为了安全(跨站脚本攻击)-->

<strong ng-bind-html="username"></strong>

<script src="app/bower_components/angular/angular.js"></script>

<script src="app/bower_components/angular-sanitize/angular-sanitize.js"></script>

<script>

    //使用自定义的模块才可以依赖别的包里面定义模块 angular定义的默认模块没有任何依赖

    angular.module('myApp', ['ngSanitize'])

</script>

</body>

</html>

　　此时运行就可以看到正确结果ngSanitize的作用是让html不转义:

angularJS1笔记-(17)-ng-bind-html指令的更多相关文章

  1. ng之自定义指令

    最近开始研究并使用angular,今天就来简单讲讲对于ng中自定义指令的一下使用心得吧! 相信用过ng的人都对ng中的指令有所了解,指令,我将其理解为AngularJS操作HTML element的一 ...

  2. 《Linux就该这么学》培训笔记_ch13_使用Bind提供域名解析服务

    <Linux就该这么学>培训笔记_ch13_使用Bind提供域名解析服务 文章最后会post上书本的笔记照片. 文章主要内容: DNS域名解析服务 安装并部署Bind服务程序 部署从服务器 ...

  3. Ext.Net学习笔记17：Ext.Net GridPanel Selection

    Ext.Net学习笔记17:Ext.Net GridPanel Selection 接下来是Ext.Net的GridPanel的另外一个功能:选择. 我们在GridPanel最开始的用法中已经见识过如 ...

  4. 【精选】Nginx模块Lua-Nginx-Module学习笔记（二）Lua指令详解(Directives)

    源码地址:https://github.com/Tinywan/Lua-Nginx-Redis Nginx与Lua编写脚本的基本构建块是指令. 指令用于指定何时运行用户Lua代码以及如何使用结果. 下 ...

  5. SQL反模式学习笔记17 全文搜索

    目标:全文搜索 使用SQL搜索关键字,同时保证快速和精确,依旧是相当地困难. SQL的一个基本原理(以及SQL所继承的关系原理)就是一列中的单个数据是原子性的. 反模式:模式匹配 使用Like 或者正 ...

  6. JAVA自学笔记17

    JAVA自学笔记17 1.Map接口 1)概述 将键映射到值的对象,一个映射不能包含重复的键,每个键最多只能映射到一个值.可以存储键值对的元素 2)与Collection接口的不同: ①Map是双列的 ...

  7. golang学习笔记17 爬虫技术路线图，python，java，nodejs，go语言，scrapy主流框架介绍

    golang学习笔记17 爬虫技术路线图,python,java,nodejs,go语言,scrapy主流框架介绍 go语言爬虫框架:gocolly/colly,goquery,colly,chrom ...

  8. Nginx模块Lua-Nginx-Module学习笔记（二）Lua指令详解(Directives)

    源码地址:https://github.com/Tinywan/Lua-Nginx-Redis Nginx与Lua编写脚本的基本构建块是指令. 指令用于指定何时运行用户Lua代码以及如何使用结果. 下 ...

  9. docker学习笔记17：Dockerfile 指令 ONBUILD介绍

    ONBUILD指令可以为镜像添加触发器.其参数是任意一个Dockerfile 指令. 当我们在一个Dockerfile文件中加上ONBUILD指令,该指令对利用该Dockerfile构建镜像(比如为A ...

随机推荐

  1. python抠图与pip install PIL报错

    窗口命令pip install PIL(python3.6+selenium——2.53.1+pycharm) from PIL import Image from selenium import w ...

  2. 【Verilog HDL】赋值语句之阻塞赋值方式与非阻塞赋值方式

    刚开始接触Verilog HDL语言时,这种硬件描述语言有一点与软件的程序设计语言直观上的最大区别大概就是这个赋值语句了(这里只是强调直观上的最大区别,事实上的最大区别并非如此). Verilog H ...

  3. 【转】netty源码分析之LengthFieldBasedFrameDecoder

    原文:https://www.jianshu.com/p/a0a51fd79f62 拆包的原理 关于拆包原理的上一篇博文 netty源码分析之拆包器的奥秘 中已详细阐述,这里简单总结下:netty的拆 ...

  4. how browser works

    https://developers.google.com/speed/articles/reflow http://blog.letitialew.com/post/30425074101/repa ...

  5. 3530: [Sdoi2014]数数

    3530: [Sdoi2014]数数 链接 分析: 对给定的串建立AC自动机,然后数位dp.数位dp的过程中,记录当前在AC自动机的哪个点上,保证不能走到出现了给定串的点. 代码: #include& ...

  6. centos中如何添加环境变量

    在Linux CentOS系统上安装完php和MySQL后,为了使用方便,需要将php和mysql命令加到系统命令中,如果在没有添加到环境变量之前,执行“php -v”命令查看当前php版本信息时时, ...

  7. SQL Server 的通用分页显示存储过程（转载）

    http://database.51cto.com/art/200512/12923.htm 建立一个 Web 应用,分页浏览功能必不可少.这个问题是数据库处理中十分常见的问题.经典的数据分页方法是: ...

  8. Python的进阶：copy与deepcopy区别

    copy()与deepcopy()之间的区分必须要涉及到python对于数据的存储方式. 首先直接上结论: —–我们寻常意义的复制就是深复制,即将被复制对象完全再复制一遍作为独立的新个体单独存在.所以 ...

  9. Vue实例 中的常用配置项

    创建Vue实例时,使用 new Vue ({//配置项}) 或者 组件定义中 export default {//配置项},所有的Vue组件都是Vue实例,并且接受相同的选项对象(一些根实例特有的选项 ...

  10. AI 启蒙-无人售货机智能找零算法

    人的理想志向往往和他的能力成正比. --约翰逊--  AI 启蒙-无人售货机智能找零算法  [问题区] 你现在是一家无人售货机生产公司的高级程序员,技术经理叫你实现无人售货机智能找零钱的算法,具体需求 ...