Angular绑定数据时转义html标签
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标签的更多相关文章
- angular 绑定数据时添加HTML标签被识别的问题
由于安全性,angular本身会对绑定的HTML标签属性进行转义,所以有些情况下我们需要用到绑定的数据里面传入html标签的时候, 需要用到一个服务:$sce $sce 服务下面的一个 $sce.tr ...
- 关于angularJS绑定数据时自动转义html标签
关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...
- angularJS绑定数据时自动转义html标签
angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...
- Spinner 通过XML形式绑定数据时 无法从String.xml中读取数组
在android应用程序中,通过XML形式给Spinner绑定数据,如果把数组放在系统的string.xml文件里,那么就有可能在运行时无法找到,导致程序异常结束,解决方法是自建一个XML文件来存放数 ...
- winform Combox绑定数据时不触发SelectIndexChanged事件
做了一个仓库选择的联动,选了仓库选其下的货区,选了货区选其下的货架分区.每个combox初始化.绑定数据是都会触发SelectIndexChanged事件,相当头疼. 后来无意中在网上看到了一种方法— ...
- MySql数据库-查询、插入数据时转义函数的使用
最近在看一部php的基础视频教程,在做案例的时,当通过用户名查询用户信息的时候,先使用了转义函数对客户提交的内容进行过滤之后再交给sql语句进行后续的操作.虽然能看到转义函数本身的作用,但是仍然有一些 ...
- 使用Eval()绑定数据时使用三元运算符
ASP.NET邦定数据“<%#Eval("Sex")%>”运用三元运算符: <%#(Eval("Sex", "{0}") ...
- ASP.NET - 使用 Eval() 绑定数据时使用 三元运算符
ASP.NET邦定数据“<%#Eval("Sex")%>”运用三元运算符: <%#(Eval("Sex", "{0}") ...
- angular绑定数据
Angular 中使用{{}}绑定业务逻辑里面定义的数据 <h1> Welcome to {{ title }}! /*引入title*/ </h1> export class ...
随机推荐
- Eclipse4.4.2手动安装Veloeclipse-2.0.8
引言: 新安装了Eclipse最新版本 4.4.2 Luna(月神),由于项目中使用到了模板引擎Velocity,所以想安装一个Velocity插件, 在网上找了一下,看到Google的vel ...
- DevExpress控件使用之RichEditControl的使用
原文:DevExpress控件使用之RichEditControl的使用 做Winform的,我们一般都知道,传统.NET界面有一个RichTextBox控件,这个是一个富文本控件,可以存储图片文字等 ...
- android学习七(创建自己定义控件)
前面学习的是android的基本控件和布局的使用,可是主要的控件和布局有时候并不能实现复杂的布局.我们来看下各种控件和布局的关系. 可见全部的控件都是直接或者间接的继承自View的,全部的布局都是直接 ...
- 【原创】shadowebdict开发日记:基于linux的简明英汉字典(二)
全系列目录: [原创]shadowebdict开发日记:基于linux的简明英汉字典(一) [原创]shadowebdict开发日记:基于linux的简明英汉字典(二) [原创]shadowebdic ...
- HTML+CSS样式设置——CSS一学就会
HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...
- network: Android 网络推断(wifi、3G与其它)
public class NetworkProber { /** * 网络是否可用 * * @param activity * @return */ public static bool ...
- html5移动开发--js温馨提示
1.a标签执行js笔试 <a id="myID" href="javascript:myfuction();"></a> 2.实时监听i ...
- dm8148 jpeg编解码器测试
测试过程: 1)于A8将jpeg传送到videoM3解码,然后,videoM3编码.在编译jpeg图像传输到A8,主要是测试jpeg编码的图像需要多少时间: 1000w像素: 编码时间:43ms. ...
- Aix db2 经user a using b连接时报SQL30082N Security processing failed with reason "42"
db2inst1登录 输入实例文件夹:/opt/ibm/db2/V9.7/instance 关闭实例:db2stop 更新示例:./db2iupdt db2inst1 启动实例:db2start 再次 ...
- 在WPF中处理Windows消息
在Winform中 处理Windows消息通过重写WndProc方法 在WPF中 使用的是System.Windows. Sytem.Windows.Controls等名字空间,没有WndProc函数 ...