由于安全性,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. hdoj--1010<dfs+奇偶剪枝>

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1010 题目描述:在n*m的矩阵中,有一起点和终点,中间有墙,给出起点终点和墙,并给出步数,在该步数情况 ...

  2. 使用Matlab实现对图片的缩放

    在做图像处理的时候,有时需要对图片的像素进行放大或则缩小. 使用Matlab很容易实现对图像的放大和缩小.这里只讲缩放到固定像素的方法. clear; clc; %清除以前的数据 folderName ...

  3. 瞄一眼LongAdder(jdk11)

    java版本11.0.1,感觉写得太水了,等心情好的时候再重新编辑一下. LongAdder中的核心逻辑主要由java.util.concurrent.atomic.Striped64维护,作为Str ...

  4. vue当中设置全局变量的方法

    import fn from 'fn' Vue.prototype.fn = fn; 调用的时候 this.fn.way

  5. 【POJ3498】March of the Penguins(最大流,裂点)

    题意:在靠近南极的某处,一些企鹅站在许多漂浮的冰块上.由于企鹅是群居动物,所以它们想要聚集到一起,在同一个冰块上.企鹅们不想把自己的身体弄湿,所以它们在冰块之间跳跃,但是它们的跳跃距离,有一个上限.  ...

  6. 36深入理解C指针之---结构体的内存处理

    一.有关结构体的内存处理包括,结构体指针和结构体成员指针的内存分配.结构体成员的数据对齐.结构体的内存释放 1.定义:与自定义数据类型(结构体)有关的内存分配.大小和释放问题 2.特征: 1).用内存 ...

  7. 反汇编->C++引用与指针

    先看一段最简单代码 #include<iostream> #include<stdlib.h> using namespace std; int main() { int te ...

  8. bq25896 IINDPM 及 無 IINDPM 時的 regsiter

      無 IINDPM status 有 IINDPM status   [bq25890 reg@][0x0]=0x5d[0x1]=0x6[0x2]=0x91[0x3]=0x1a[0x4]=0x8[0 ...

  9. java中过滤查询文件

    需求,过滤出C盘demo目录下 所有以.java的文件不区分大小写 通过实现FileFilter接口 定义过滤规则,然后将这个实现类对象传给ListFiles方法作为参数即可. 使用递归方法实现 pa ...

  10. Codeforces 919 C. Seat Arrangements

    C. Seat Arrangements   time limit per test 1 second memory limit per test 256 megabytes input standa ...