angularJS1笔记-(17)-ng-bind-html指令
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指令的更多相关文章
- ng之自定义指令
最近开始研究并使用angular,今天就来简单讲讲对于ng中自定义指令的一下使用心得吧! 相信用过ng的人都对ng中的指令有所了解,指令,我将其理解为AngularJS操作HTML element的一 ...
- 《Linux就该这么学》培训笔记_ch13_使用Bind提供域名解析服务
<Linux就该这么学>培训笔记_ch13_使用Bind提供域名解析服务 文章最后会post上书本的笔记照片. 文章主要内容: DNS域名解析服务 安装并部署Bind服务程序 部署从服务器 ...
- Ext.Net学习笔记17：Ext.Net GridPanel Selection
Ext.Net学习笔记17:Ext.Net GridPanel Selection 接下来是Ext.Net的GridPanel的另外一个功能:选择. 我们在GridPanel最开始的用法中已经见识过如 ...
- 【精选】Nginx模块Lua-Nginx-Module学习笔记（二）Lua指令详解(Directives)
源码地址:https://github.com/Tinywan/Lua-Nginx-Redis Nginx与Lua编写脚本的基本构建块是指令. 指令用于指定何时运行用户Lua代码以及如何使用结果. 下 ...
- SQL反模式学习笔记17 全文搜索
目标:全文搜索 使用SQL搜索关键字,同时保证快速和精确,依旧是相当地困难. SQL的一个基本原理(以及SQL所继承的关系原理)就是一列中的单个数据是原子性的. 反模式:模式匹配 使用Like 或者正 ...
- JAVA自学笔记17
JAVA自学笔记17 1.Map接口 1)概述 将键映射到值的对象,一个映射不能包含重复的键,每个键最多只能映射到一个值.可以存储键值对的元素 2)与Collection接口的不同: ①Map是双列的 ...
- golang学习笔记17 爬虫技术路线图，python，java，nodejs，go语言，scrapy主流框架介绍
golang学习笔记17 爬虫技术路线图,python,java,nodejs,go语言,scrapy主流框架介绍 go语言爬虫框架:gocolly/colly,goquery,colly,chrom ...
- Nginx模块Lua-Nginx-Module学习笔记（二）Lua指令详解(Directives)
源码地址:https://github.com/Tinywan/Lua-Nginx-Redis Nginx与Lua编写脚本的基本构建块是指令. 指令用于指定何时运行用户Lua代码以及如何使用结果. 下 ...
- docker学习笔记17：Dockerfile 指令 ONBUILD介绍
ONBUILD指令可以为镜像添加触发器.其参数是任意一个Dockerfile 指令. 当我们在一个Dockerfile文件中加上ONBUILD指令,该指令对利用该Dockerfile构建镜像(比如为A ...
随机推荐
- C语言 有关内存的思考题
非原创. 今天笔试时候遇到的问题,原文链接见底部. 1 void GetMemory(char *p) { p = (); } void Test(void) { char *str=NULL; Ge ...
- GoLand（三）数据类型、变量和常量
Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.数据类型 数据类型的出现是为了把数据分成所需内存大小不同的数据,编程的时候需要用大数据的时候才需要申请大内存, ...
- FPGA-Xilinx原语调用之ODDR
记录背景:最近由于想实现GMIItoRGMII的功能,因此需要调用ODDR原语. ODDR:Dedicated Dual Data Rate (DDR) Output Register 通过ODDR把 ...
- to improve sqlite performance
INSERT is really slow - I can only do few dozen INSERTs per second http://www.sqlite.org/faq.html#q1 ...
- MacOS下netstat和lsof使用的若干问题
[-= 博客目录 =-] 1-相关说明 1.1-博客介绍 1.2-netstat和lsof 2-学习过程 2.1-netstat 2.2-lsof 2.3-netstat和lsof区别和关联 3-资料 ...
- PKUWC2019题解
这里其实只放一下题面和一些提示,大家评一评有几道题可做 题面全部蒯自xzz的博客 Day 1 T1 题面 一个有向图,每一条边可能存在也可能不存在,求拓扑序列数量的期望乘\(2^m\) 没有重边自环, ...
- 解决web翻转动画闪屏
首先确保backface-visibility: hidden.这样做可以解决大部分闪屏的情况. 然后需要特别注意的是谷歌的浏览器,不管是桌面端还是移动端,在翻转的过程中在该元素上绘制其他元素也会导致 ...
- 在腾讯ubuntu云服务器上面部署asp.net core 2.1网站
微软以后的政策肯定是在开源和跨平台这一块,所以最近在学习asp.net core 2.1,查看市面上面大部分的把asp.net core部署在Linux后,决定亲自实验一番,不操作不知道,居然最新版本 ...
- sql server sql查询数据库的表，字段，主键，自增，字段类型等信息
1.查询数据表的属性(名称.说明.是否主键.数据类型.是否自增) SELECT t1.name columnName,case when t4.id is null then 'false' else ...
- [操作系统]makefile
makefile文件保存了编译器和连接器的参数选项,还表述了所有源文件之间的关系(源代码文件需要的特定的包含文件,可执行文件要求包含的目标文件模块及库等). 创建程序(make程序)首先读取makef ...