AngularJs在绑定数据时默认会以文本的形式出现在页面上,比如我现在有这样一段代码

<div ng-controller="testCtrl">{{data}}</div>

function testCtrl($scope) {
$scope.data = '<span class="red">标红</span>';
}

那么在页面上必然会在也面上直接显示 <span class="red">标红</span>

要想让包含html标签的字符串,能在页面上正常显示,就必须将其转义,此时就要用到angularjs的ng-bind-html,它可以将包含html标签的字符串进行转义然后正确的显示在页面上要使用ng-bind-html必须引入angular-sanitize.min.js这个文件,并在定义模块的时候,在app.js中注入ngSanitize才可以使用ng-bind-html

 
  <script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-sanitize.min.js"></script> <div ng-controller="testCtrl">
<div ng-bind-html="data"></div>
</div function testCtrl($scope) {
$scope.data = ''<span class="red">标红</span>';//记得要在app.js里面注入ngSanitize
}

  

Angular绑定数据时转义html标签的更多相关文章

  1. angular 绑定数据时添加HTML标签被识别的问题

    由于安全性,angular本身会对绑定的HTML标签属性进行转义,所以有些情况下我们需要用到绑定的数据里面传入html标签的时候, 需要用到一个服务:$sce $sce 服务下面的一个 $sce.tr ...

  2. 关于angularJS绑定数据时自动转义html标签

    关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...

  3. angularJS绑定数据时自动转义html标签

    angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...

  4. Spinner 通过XML形式绑定数据时 无法从String.xml中读取数组

    在android应用程序中,通过XML形式给Spinner绑定数据,如果把数组放在系统的string.xml文件里,那么就有可能在运行时无法找到,导致程序异常结束,解决方法是自建一个XML文件来存放数 ...

  5. winform Combox绑定数据时不触发SelectIndexChanged事件

    做了一个仓库选择的联动,选了仓库选其下的货区,选了货区选其下的货架分区.每个combox初始化.绑定数据是都会触发SelectIndexChanged事件,相当头疼. 后来无意中在网上看到了一种方法— ...

  6. MySql数据库-查询、插入数据时转义函数的使用

    最近在看一部php的基础视频教程,在做案例的时,当通过用户名查询用户信息的时候,先使用了转义函数对客户提交的内容进行过滤之后再交给sql语句进行后续的操作.虽然能看到转义函数本身的作用,但是仍然有一些 ...

  7. 使用Eval()绑定数据时使用三元运算符

    ASP.NET邦定数据“<%#Eval("Sex")%>”运用三元运算符: <%#(Eval("Sex", "{0}") ...

  8. ASP.NET - 使用 Eval() 绑定数据时使用 三元运算符

    ASP.NET邦定数据“<%#Eval("Sex")%>”运用三元运算符: <%#(Eval("Sex", "{0}") ...

  9. angular绑定数据

    Angular 中使用{{}}绑定业务逻辑里面定义的数据 <h1> Welcome to {{ title }}! /*引入title*/ </h1> export class ...

随机推荐

  1. Portal.MVC

    Portal.MVC Portal.MVC 简介 项目是基于MVC4+EF,带有角色,权限,用户中心及账户相关(登录,注册,修改密码,找回密码等)等基本功能.参考的开源项目nopcommerce,这是 ...

  2. IOS私人API用法

    先要使用class-dump 和dumpFrameworks.pl 工具 将ios的framework导出来. 下面是工具的下载地址: class-dump下载地址http://www.codethe ...

  3. [Python网络编程]gevent httpclient以及网页编码

    之前看到geventhttpclient这个项目,https://github.com/gwik/geventhttpclient,官方文档说非常快,因为响应使用了C的解析,所以我一直想把这玩意用到项 ...

  4. JAVA学习课第二十八届(多线程(七))- 停止-threaded多-threaded面试题

    主密钥 /*  * wait 和 sleep 差别?  * 1.wait能够指定时间也能够不指定  * sleep必须指定时间  * 2.在同步中,对CPU的运行权和锁的处理不同  * wait释放运 ...

  5. UVa 11879 - Multiple of 17

    称号:计算一个数字是不17倍数. 说明:串,睑板. 简单的问题,直接推论可以是. 设定 n = 10a + d:(0 ≤ d ≤ 9) a - 5d = 51a - 5n,假设n被17整除,这个数必定 ...

  6. java.io.FileNotFoundException: /home/hadoop/hadoop/dfs/namenode/current/VERSION (Permission denied)

    今天布置hadoop集群,尝试单独将secondarynamenode分属到一台独立的虚拟机上, 当格式化后,start-dfs.sh.namenode没启动.查看日志.报错例如以下 查看权限才发现, ...

  7. 玩转Web之Json(三)-----easy ui怎么把前台显示的dataGird中的所有数据序列化为json,返回到后台并解析

    最近做一个项目时,需要在dataGird中插入<input>,即文本输入框,当点击提交时,需要把文本框里填的数据返以及其他列的一些信息以json数组的格式返回到后台,虽然我实现了该功能,但 ...

  8. RH033读书笔记(11)-Lab 12 Configuring the bash Shell

    Sequence 1: Configuring the bash Shell Deliverable: A system with new aliases that clear the screen, ...

  9. MaidSafe.net,一个完全去中心的化的云存储系统

    MaidSafe.net,一个完全去中心的化的云存储系统 (类似Bitcloud系统) 本帖最后由 tbit 于 2014-3-26 16:11 编辑 已经开发了8年,最近即将推出测试和IPO.开放源 ...

  10. 网站压力测试工具Webbench介绍

    webbench简单介绍: webbench是由 Lionbridge公司开发的出色的站点压力測试工具.它能測试处在同样硬件上,不同服务的性能以及不同硬件上同一个服务的执行状况.webbench不但能 ...