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. 【夸QT十一】外来物品:通用脚本帮助Web运行基础Linux命令

    需求分析: 需要注意的是在这里第一次,这个人是不是QT系列文章,它是关于Web的,之所以写这篇文章.这是因为碍着Web相关开发时间,而且往往涉及linux与底层指令处理.例如,创建一个文件夹,删除一个 ...

  2. Vue.js学习与理解

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不 ...

  3. ubuntu10.10和windows双系统启动顺序的修改

    我想大部分童鞋装ubuntu的时候,硬盘上的windows肯定还是保留着的,启动电 脑时可以选择,想进windows就进windows,想进ubuntu就进ubuntu.但装完ubuntu后,它默认启 ...

  4. WPF 引用DLL纯图像资源包类库中的图片

    原文:WPF 引用DLL纯图像资源包类库中的图片 1.建立WPF应用程序              过程略.   2.创建类库项目(图片资源包)       创建图片资源类库项目MyImages,删除 ...

  5. windows下一个erlang包装镜像启动

    于linux环境,erlang经systools:make_script("",[])和systools:make_tar()命令生成图像包,安装镜像包,图片包的安装过程,通过替换 ...

  6. newinstance()和new有什么区别?(转)

    在初始化一个类,生成一个实例的时候:newInstance() 和 new 有什么区别? 用newInstance与用new是区别的,区别在于创建对象的方式不一样,前者是使用类加载机制,那么为什么会有 ...

  7. 引用第三方框架 不支持ARC

    我们会常常遇到一个问题就是引用第三方框架之后发现不支持内存的自己主动处理(ARC) 我们须要这样来操作: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdT ...

  8. 解决Nginx的connect() to 127.0.0.1:8080 failed (13: Permission denied) while connect

    在进行Nginx+Tomcat 负载均衡的时候遇到了这个权限问题,在error.log日志中.我们能够看到例如以下: connect() to 127.0.0.1:8080 failed (13: P ...

  9. NFS 配置服务

    NFS 配置服务 北京市海淀区  张俊浩 一.NFS.即网络文件系统(Network File System,NFS).一种使用于分散式文件系统的协议,由升阳公司开发.于1984年向外发布.功能是通过 ...

  10. 矢量编程——随着MNIST案例

    矢量编程使用的所有明确的矢量运算,而不是for周期. 上一节所用的是512*512*10的数据集非常小.我们取的patch非常小(8*8),学来的特征非常少(25).而我又凝视掉了梯度校验(偷懒),所 ...