由于安全性,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. 【Luogu】P1430序列取数(DP)

    题目链接 博弈DP太喵了qwq 设f[i][j]表示剩下区间[i,j]要取,先手最大值 明显我们要从这区间里面拿个最大的 就等价于这段区间的前缀和,我们要给对手留下个最小的 就是f[i][j]=sum ...

  2. 【Luogu】P2607骑士(基环树DP)

    题目链接 这题……好吧我比着题解打的 题解连接 #include<cstring> #include<cstdio> #include<cstdlib> #incl ...

  3. Java 线程池的原理与实现学习(三)

    一简介 线程的使用在java中占有极其重要的地位,jdk1.4及其之前的jdk版本,关于线程池的使用是极其简陋的.在jdk1.5之后这一情况有了很大的改观,Jdk1.5之后加入了java.util.c ...

  4. [暑假集训--数论]poj2657 Comfort

    Description A game-board consists of N fields placed around a circle. Fields are successively number ...

  5. PHP的图片处理类(缩放、加图片水印和剪裁)

    <!--test.php文件内容--> <?php //包含这个类image.class.php include "image.class.php"; $img ...

  6. 用户认证系统 django.contrib.auth模块

    一 导入auth模块 from django.contrib.auth.models import User from django.contrib import auth auth模块的操作针对的就 ...

  7. COGS728. [网络流24题] 最小路径覆盖问题

    算法实现题8-3 最小路径覆盖问题(习题8-13) ´问题描述: 给定有向图G=(V,E).设P是G的一个简单路(顶点不相交)的集合.如果V中每个顶点恰好在P的一条路上,则称P是G的一个路径覆盖.P中 ...

  8. net5:自定义验证控件服务器端验证与客户端验证的使用

    原文发布时间为:2008-07-29 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...

  9. locust性能测试安装

    Locust简介 Locust是一款易于使用的分布式用户负载测试工具.它用于对网站(或其他系统)进行负载测试,并确定系统可以处理多少并发用户.这个想法是,在测试期间,一群蝗虫(Locust)会攻击你的 ...

  10. 输入框为数字类型时防止maxlength属性不起作用

    <input type="number" oninput="if(value.length>5)value=value.slice(0,5)" /& ...