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. Android 自己的自动化测试(2)依据ID查找对象(java)

    前一篇文章是写 Android 自己的自动化测试(1)如何安装和卸载应用程序(java) ,以下再探索一下假设在普通java应用程序中,依据ID来查找对象 1.类库依赖: The library de ...

  2. 3D MAX脚本教程1

    本文转载自http://jiurong995294.blog.163.com/blog/static/195133243201192531546490/ 方便以后须要时候使用 为什么要学习3D MAX ...

  3. Javascript设计模式系列二

    创建对象的基本模式,一.门户大开型,二.采用下划线来表示属性和方法的私用性,三.使用闭包来创建私用的成员. 一.门户大开型.只能提供公用成员.所有属性和方法都公开的.可访问的.这些共用属性都要使用th ...

  4. 构建工具maven

     构建工具maven  =UTF-8''Gradle Effective Implementation Guide.pdf: http://www.t00y.com/file/76854506 b ...

  5. 【甘道夫】HBase开发环境搭建过程中可能遇到的异常:No FileSystem for scheme: hdfs

    异常: 2014-02-24 12:15:48,507 WARN  [Thread-2] util.DynamicClassLoader (DynamicClassLoader.java:<in ...

  6. HDU 1698 Just a Hook (段树更新间隔)

    Problem Description In the game of DotA, Pudge's meat hook is actually the most horrible thing for m ...

  7. 创建Oracle的用户 create user scott identified by tiger;

    在命令行里sqlplus 以system身份登录,password是自己设的system C:\Users\Administrator>sqlplus SQL*Plus: Release 10. ...

  8. [LeetCode257]Binary Tree Paths

    题目: Given a binary tree, return all root-to-leaf paths. For example, given the following binary tree ...

  9. HDU 1274 展开字符串 (递归+string类)

    题目链接:HDU 1274 展开字符串 中文题. 左括号进入DFS函数,右括号return到上一层. 注意return回去的是这个一层递归中的括号中的字母串. AC代码: #include<st ...

  10. Atitit.软件GUIbutton和仪表板(01)--警报系统--

    Atitit.软件GUIbutton和仪表板(01)--警报系统-- 1. 温度报警防区(鲁大师,360taskman) 1 2. os-区-----cpu_mem_io资源占用监測 1 3. Vm区 ...