angular 绑定数据时添加HTML标签被识别的问题
由于安全性,angular本身会对绑定的HTML标签属性进行转义,所以有些情况下我们需要用到绑定的数据里面传入html标签的时候,
需要用到一个服务:$sce
$sce 服务下面的一个 $sce.trustAsHtml() 会对绑定的内容已html方式设置为可信任,同时也要对使用的绑定数据的地方进行 ng-bind-html 绑定 不同于 ng-bind
当然如果需要使用 {{}} 表达式的数据绑定方式也可以使用自定义过滤器 filter 的形式:
filter:
app.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
过滤器使用:
{{ data | to_trusted }}
或者
<p ng-bind-html="data | to_trusted"></p>
angular 绑定数据时添加HTML标签被识别的问题的更多相关文章
- Angular绑定数据时转义html标签
AngularJs在绑定数据时默认会以文本的形式出现在页面上,比如我现在有这样一段代码 <div ng-controller="testCtrl">{{data}}&l ...
- 关于angularJS绑定数据时自动转义html标签
关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...
- el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除
前几天遇到一个题,el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除,在这上面用到了递归算法,废话不多说,直接上代码 <template> & ...
- angularJS绑定数据时自动转义html标签
angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...
- Spinner 通过XML形式绑定数据时 无法从String.xml中读取数组
在android应用程序中,通过XML形式给Spinner绑定数据,如果把数组放在系统的string.xml文件里,那么就有可能在运行时无法找到,导致程序异常结束,解决方法是自建一个XML文件来存放数 ...
- winform Combox绑定数据时不触发SelectIndexChanged事件
做了一个仓库选择的联动,选了仓库选其下的货区,选了货区选其下的货架分区.每个combox初始化.绑定数据是都会触发SelectIndexChanged事件,相当头疼. 后来无意中在网上看到了一种方法— ...
- 后台给GridView绑定数据时给每一行添加一个JS方法
--------JS function ReturnDictionaryValues(srcElement) { top.document.getElementById("_DialogFr ...
- 使用Eval()绑定数据时使用三元运算符
ASP.NET邦定数据“<%#Eval("Sex")%>”运用三元运算符: <%#(Eval("Sex", "{0}") ...
- ASP.NET - 使用 Eval() 绑定数据时使用 三元运算符
ASP.NET邦定数据“<%#Eval("Sex")%>”运用三元运算符: <%#(Eval("Sex", "{0}") ...
随机推荐
- [luoguP2463] [SDOI2008]Sandy的卡片(后缀数组 + st表)
传送门 很容易想到,题目中的相同是指差分数组相同. 那么可以把差分数组连起来,中间加上一个没有出现过的且字典序小的数 双指针移动,用st表维护height数组中的最小值. 当然用单调队列应该也可以且更 ...
- [SPOJ-PT07J] Query on tree III (主席树)
题意翻译 你被给定一棵带点权的n个点的有根数,点从1到n编号. 定义查询 query(x,k): 寻找以x为根的k大点的编号(从小到大排序第k个点) 假设没有两个相同的点权. 输入格式: 第一行为整数 ...
- 【bzoj1257】[CQOI2007]余数之和sum
[bzoj1257][CQOI2007]余数之和sum 2014年9月1日1,9161 Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod ...
- C#递归删除进程及其子进程
/// <summary> /// 结束进程和相关的子进程 /// </summary> /// <param name="pid">需要结束的 ...
- PHP中的验证码类(完善验证码)
运行结果: <!--vcode.class.php--> <?php class Vcode { private $width; //宽 private $height; //高 p ...
- element-ui 的 upload组件的clearFiles方法调用方法
<template> <div> <el-button @click="clearUploadedImage">重新上传</el-butt ...
- mybatis原理源码大牛连接
mybatis讲解的非常好的连接: https://www.jianshu.com/nb/5226994 执行流程简介参考:http://www.cnblogs.com/dongying/p/4142 ...
- window10下用ZIP压缩包安装 mysql 8.0.11
1.下载地址 https://dev.mysql.com/downloads/mysql/ 2.解压后的文件目录如图,复制到指定的文件目录,如我的 E:\root\mysql-8.0.11-winx6 ...
- hdu 5400(思路题)
Arithmetic Sequence Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Othe ...
- PL/SQL Developer工具包和InstantClient连接Oracle 11g数据库
一.前言 PLSQL Developer是Oracle数据库开发工具,很牛也很好用,PLSQL Developer功能很强大,可以做为集成调试器,有SQL窗口,命令窗口,对象浏览器和性能优化等功能. ...