由于安全性,angular本身会对绑定的HTML标签属性进行转义,所以有些情况下我们需要用到绑定的数据里面传入html标签的时候,

需要用到一个服务:$sce

$sce 服务下面的一个 $sce.trustAsHtml() 会对绑定的内容已html方式设置为可信任,同时也要对使用的绑定数据的地方进行 ng-bind-html 绑定 不同于 ng-bind

当然如果需要使用 {{}} 表达式的数据绑定方式也可以使用自定义过滤器 filter 的形式:

filter:

  1. app.filter('to_trusted', ['$sce', function ($sce) {
  2. return function (text) {
  3. return $sce.trustAsHtml(text);
  4. };

过滤器使用:

{{  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. linux--bash: redis-server: 未找到命令

    linux 安装redis过程中出现了异常,make不通过,异常如下: [root@localhost redis-2.8.3]# make cd src && make all ma ...

  2. python根据文件目录、文件类型和文件与当前时间差删除文件

    直接贴代码: 删除某个目录下的文件,不遍历木路下文件夹下的文件,根据时间差删除,默认7天 #!/usr/bin/python # -*- coding: gbk -*- import os impor ...

  3. bzoj 2792 [Poi2012]Well 二分+dp+two_pointer

    题目大意 给出n个正整数X1,X2,...Xn,可以进行不超过m次操作,每次操作选择一个非零的Xi,并将它减一. 最终要求存在某个k满足Xk=0,并且z=max{|Xi - Xi+1|}最小. 输出最 ...

  4. net5:Theme主题样式的动态变换,在内容页content中操作影响模板页的操作

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

  5. 如何应用r.js对requirejs下的js代码合并

    1.在根目录新建build.js ({ baseUrl:'js', paths:{ jquery:'static/jquery-1.10.2.min', underscore:'static/unde ...

  6. AC日记——小行星 洛谷 P2711

    题目背景 pid=3437 题目描述 星云中有n颗行星,每颗行星的位置是(x,y,z).每次可以消除一个面(即x,y或z坐标相等)的行星,但是由于时间有限,求消除这些行星的最少次数. 输入输出格式 输 ...

  7. 嗅探X-Windows服务按键工具xspy

    嗅探X-Windows服务按键工具xspy   X-Windows完整名字是X Windows图形用户接口.它是一种计算机软件系统和网络协议.它为联网计算机提供了一个基础的图形用户界面(GUI)和丰富 ...

  8. Bitmap 图片格式并用 C++ 读写 Bitmap

    转自 Bitmap 图片格式并用 C++ 读写 Bitmap 1.Bitmap 图片格式 每部分的具体内容就不展开了.要说的有两点: (1)调色板不是必须的,可有可无,有没有调色板可以通过位图文件头的 ...

  9. openfire Android学习(六)----总结

    Xmpp的一些方法整理到一个工具类中了 XmppConnection.java [java] view plaincopy [java] view plaincopy import java.io.B ...

  10. 【spring boot】在Spring mvc中controller中可以拿到对象信息,但是返回给前台却是什么也没有,解决方案

    如图所示: 最后: 问题解决: 这个原因是因为,User类并未给字段提供get/set方法,所以给前台传递过去的值是空的. 解决方案: 为User类添lombok的注解@Data,为实体类提供get/ ...