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}") ...
随机推荐
- Node.js 文件输入
最近在尝试用 JavaScript (Node.js) 写题.为此,特地看了 ECMAScript 2017 Language Specification(大雾).写题一般是从文件输入,确切地说是,将 ...
- BZOJ4818 [SDOI2017]序列计数 【生成函数 + 快速幂】
题目 Alice想要得到一个长度为n的序列,序列中的数都是不超过m的正整数,而且这n个数的和是p的倍数.Alice还希望 ,这n个数中,至少有一个数是质数.Alice想知道,有多少个序列满足她的要求. ...
- 微信小程序红包开发思路 微信红包小程序开发思路讲解
之前公司开发小程序红包,将自己在开发的过程中遇到的一些坑分享到了博客里.不少人看了以后,还是不明白怎么开发.也加了我微信咨询.所以今天,我就特意再写一篇文章,这次就不谈我开发中遇到的坑了.就主要给大家 ...
- eclipse testng插件安装
1.安装Testng 在Eclipse中,点击Help→Install new software→点击Add,在location中输入http://beust.com/eclipse ,选择TestN ...
- 关于在IE下面promise兼容的解决办法
下载es6-promise就可以解决这个问题 import ES6Promise from "es6-promise" if(!window.Promise) { console. ...
- c#.net分类上升达人~~~呵呵。。。
原文发布时间为:2008-11-11 -- 来源于本人的百度文章 [由搬家工具导入] 觉得自己蛮无聊的~~~~~~~~~(>_<)~~~~
- udp 多播2
11.3 多播 单播用于两个主机之间的端对端通信,广播用于一个主机对整个局域网上所有主机上的数据通信.单播和广播是两个极端,要么对一个主机进行通信,要么对整个局域网上的主机进行通信.实际情况下,经常 ...
- 转载 linux 僵尸进程,讲的很透彻
僵尸进程的产生和避免,以及wait,waitpid的使用 在fork()/execve()过程中,假设子进程结束时父进程仍存在,而父进程fork()之前既没安装SIGCHLD信号处理函数调用waitp ...
- Scrapy学习-16-动态网页技术
Selenium浏览器自动化测试框架 简介 Selenium 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样. 支持的浏览器包括IE(7, 8, ...
- [react-router] 平时积累
path通配符: <Route path="/hello/:name"> // 匹配 /hello/michael // 匹配 /hello/ryan <Rout ...