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 ...
随机推荐
- 安装luasocket 的正确姿势
在lua中用下面这种方式使用socket,安装luasocket-2.0.2后老是报一些莫名其妙的错误. require("socket") 下面是部分报错信息 lua: erro ...
- 简单的贝叶斯分类器的python实现
# -*- coding: utf-8 -*- ''' >>> c = Classy() >>> c.train(['cpu', 'RAM', 'ALU', 'io ...
- quartz 任务高度的动态修改
package com.example.demo.controller; import org.quartz.*;import org.quartz.impl.StdSchedulerFactory; ...
- 2_C语言中的数据类型 （五）char
1.1 char类型 1.1.1 char常量,变量 char c:定义一个char变量 ‘a’,char的常量 Char的本质就是一个整数,一个只有1个字节大小的整数 ...
- How to use the windows active directory to authenticate user via logon form 如何自定义权限系统,使用 active directory验证用户登录
https://www.devexpress.com/Support/Center/Question/Details/Q345615/how-to-use-the-windows-active-dir ...
- Winform下的语言国际化，几行代码轻松实现
最近做了一些关于winform的项目,需要用到winform的语言国际化,在初使化的时候用起来非常方便.可以参考一下: 核心逻辑: 预览效果演示: OK,以下是核心代码和操作流程 一,添加Langua ...
- java项目部署之后,Jar包中配置文件修改
Java项目发布时,配置文件不像.net项目一样与工程路径保持一致,而是直接包含在了jar包中,此时要修改就没那么方便了,我们可以将配置文件从jar包抽离出来,修改完之后再写入Jar包即可, 也没那么 ...
- 高级PHP工程师所应该具备的专业素养
初次接触PHP,就为他的美所折服,于是一发不可收拾. 很多面试,很多人员能力要求都有“PHP高级工程师的字眼”,如果您真心喜欢PHP,并且您刚起步,那么我简单说说一个PHP高级工程师所应该具备的,希望 ...
- 4星|《财经》2018年第10期：远程视界自我定位为“专科远程医疗联合体O2O平台”，主要盈利模式就是做融资租赁
<财经>2018年第10期 总第527期 旬刊 本期主要内容:做远程医疗资金链断裂:人工智能时代有可能让刘易斯观点论失败:小米的盈利模式刨析:陆奇在百度的改革.其中1.4都成了朋友圈热文. ...
- OpenFastPath（1）：快平面接口是否支持多ip
1.配置环境 fp0接口上配置两个IP地址: fp0 Link encap:Ethernet HWaddr 00:0c:29:30:38:db inet addr:192.168.56. ...