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. 很久没来这里,今天的评测java怪东西,左右Date类和时间戳转换

    在发展过程中,经常会遇到利用上课时间.说话的Date类就不得不提时间戳,左右fr=aladdin" target="_blank">的定义大家能够看看网上对时间戳的 ...

  2. Test SRM Level Two: CountExpressions, Brute Force

    题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=8157 这道题目跟扑克牌算24的题目比较像,但要简单一些.点击查 ...

  3. HTML5_文本元素

    <!DOCTYPE html> <hmtl> <html  lang="zh-en"> <head> <meta  chars ...

  4. atitit..主流 浏览器 js 发动机 内核 市场份额 attialx总结vOa9

    atitit..主流 浏览器 js 发动机  内核 市场份额 attialx总结vOa9 1. 浏览器内核 1 2. 浏览器的主要组件包含: 2 2.1. 主要组件体系结构 2 2.2. WebCor ...

  5. hdu4858 项目管理 bestcoder round1 B

    唔..弱弱的暴力水果 0操作时,将v加到u上,能够直接把v加到u相连的点上,这样输出时直接输出要求点的值. 布这种话反正我是超时了.. #include<cstdio> #include& ...

  6. C++基于该模型模板包括节目外实例

    一个."经典模式"失败 我们学过C++的人都知道.在C++中组织代码的经典模型是:将函数或类的声明和定义部分分开在不同的文件之中   , 即一般将声明放在一个.h的头文件里而定义在 ...

  7. Windows 8实例教程系列 - 自定义应用风格

    原文:Windows 8实例教程系列 - 自定义应用风格 在Windows 8 XAML实例教程中,曾经提及过应用风格设计方法以及如何创建可复用样式代码.本篇将深入讨论如何创建自定义Windows8应 ...

  8. VMware workstation 10.0的永久key

    MA491-6NL5Q-AZAM0-ZH0N2-AAJ5A5A6F6-88247-XZH59-HL0Q6-8CD2VHF6QX-20187-2Z391-522NH-9AELT5F29M-48312-8 ...

  9. rhel6使用的版本数部分intel xeon处理器时间bug

    可惜在总前几天"oracle操作和维护的高级别小组"于.BBQ 上帝说,大量RHEL的bug.这bug在这个例子中,下面的URL: https://access.redhat.co ...

  10. C奇淫技巧,——宏神奇

    一个.宏列表 当这个问题面临: 有一个标志变量.位代表对应的含义. 我们须要提供一组函数来訪问设置这些位.可是对于每一个标记位的操作函数都是相似的.若有32个位,难道要搞32套相似的操作函数么? 你或 ...