由于安全性,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标签被识别的问题的更多相关文章

  1. Angular绑定数据时转义html标签

    AngularJs在绑定数据时默认会以文本的形式出现在页面上,比如我现在有这样一段代码 <div ng-controller="testCtrl">{{data}}&l ...

  2. 关于angularJS绑定数据时自动转义html标签

    关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...

  3. el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除

    前几天遇到一个题,el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除,在这上面用到了递归算法,废话不多说,直接上代码 <template> & ...

  4. angularJS绑定数据时自动转义html标签

    angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...

  5. Spinner 通过XML形式绑定数据时 无法从String.xml中读取数组

    在android应用程序中,通过XML形式给Spinner绑定数据,如果把数组放在系统的string.xml文件里,那么就有可能在运行时无法找到,导致程序异常结束,解决方法是自建一个XML文件来存放数 ...

  6. winform Combox绑定数据时不触发SelectIndexChanged事件

    做了一个仓库选择的联动,选了仓库选其下的货区,选了货区选其下的货架分区.每个combox初始化.绑定数据是都会触发SelectIndexChanged事件,相当头疼. 后来无意中在网上看到了一种方法— ...

  7. 后台给GridView绑定数据时给每一行添加一个JS方法

    --------JS function ReturnDictionaryValues(srcElement) { top.document.getElementById("_DialogFr ...

  8. 使用Eval()绑定数据时使用三元运算符

    ASP.NET邦定数据“<%#Eval("Sex")%>”运用三元运算符: <%#(Eval("Sex", "{0}") ...

  9. ASP.NET - 使用 Eval() 绑定数据时使用 三元运算符

    ASP.NET邦定数据“<%#Eval("Sex")%>”运用三元运算符: <%#(Eval("Sex", "{0}") ...

随机推荐

  1. [luoguP2463] [SDOI2008]Sandy的卡片(后缀数组 + st表)

    传送门 很容易想到,题目中的相同是指差分数组相同. 那么可以把差分数组连起来,中间加上一个没有出现过的且字典序小的数 双指针移动,用st表维护height数组中的最小值. 当然用单调队列应该也可以且更 ...

  2. [SPOJ-PT07J] Query on tree III (主席树)

    题意翻译 你被给定一棵带点权的n个点的有根数,点从1到n编号. 定义查询 query(x,k): 寻找以x为根的k大点的编号(从小到大排序第k个点) 假设没有两个相同的点权. 输入格式: 第一行为整数 ...

  3. 【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 ...

  4. C#递归删除进程及其子进程

    /// <summary> /// 结束进程和相关的子进程 /// </summary> /// <param name="pid">需要结束的 ...

  5. PHP中的验证码类(完善验证码)

    运行结果: <!--vcode.class.php--> <?php class Vcode { private $width; //宽 private $height; //高 p ...

  6. element-ui 的 upload组件的clearFiles方法调用方法

    <template> <div> <el-button @click="clearUploadedImage">重新上传</el-butt ...

  7. mybatis原理源码大牛连接

    mybatis讲解的非常好的连接: https://www.jianshu.com/nb/5226994 执行流程简介参考:http://www.cnblogs.com/dongying/p/4142 ...

  8. window10下用ZIP压缩包安装 mysql 8.0.11

    1.下载地址 https://dev.mysql.com/downloads/mysql/ 2.解压后的文件目录如图,复制到指定的文件目录,如我的 E:\root\mysql-8.0.11-winx6 ...

  9. hdu 5400(思路题)

    Arithmetic Sequence Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Othe ...

  10. PL/SQL Developer工具包和InstantClient连接Oracle 11g数据库

    一.前言 PLSQL Developer是Oracle数据库开发工具,很牛也很好用,PLSQL Developer功能很强大,可以做为集成调试器,有SQL窗口,命令窗口,对象浏览器和性能优化等功能. ...