【问题描述】

angular js的强大之处之一就是他的数据双向绑定功能----->ng-bind和针对form的ng-model

但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签

angularJs输出html的时候,浏览器并不解析这些html标签

我们用ng-bind-html这样的指令来绑定,浏览器中显示的还是html代码

【解决办法---$sce】

通过使用$ sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”

咱们还可以这样用,把它封装成一个过滤器就可以在模板上随时调用了

filter code:

app.filter('to_trusted', ['$sce', function ($sce) {
  return function (text) {
  return $sce.trustAsHtml(text);
  };
}]);

html code:

<p ng-bind-html="currentWork.description | to_trusted"></p>

【AngularJs】---$sce 输出Html的更多相关文章

  1. AngularJS通过$sce输出html的方法

    不知道大家有没有发现在用AngularJS作为前端搭建个人博客的时候,发现用AngularJs输出html的时候,浏览器并不解析这些html标签,这里我们需要其显示angular输出的html能被浏览 ...

  2. Rust笔记

    前言: 学了有段时间了,现在同步到博客园. 正文: Rust语言介绍 l Rust由js之父开发的新型语言,打破了传统的难以接触底层的局面.这是个有C++开发的语言.拥有C的血统 l Rust必须严格 ...

  3. tomcat中配置jndi数据库源

    tomcat添加依赖 lib目录下添加依赖mysql-connector-java-8.0.16 配置数据源 介绍两种方法:tomcat中配置或web应用中配置 tomcat/conf/context ...

  4. web项目Log4j日志输出路径配置问题

    问题描述:一个web项目想在一个tomcat下运行多个实例(通过修改war包名称的实现),然后每个实例都将日志输出到tomcat的logs目录下实例名命名的文件夹下进行区分查看每个实例日志,要求通过尽 ...

  5. 5、AngularJS 直接绑定显示html ($sce、$sanitize服务)

    1.直接使用$sce服务(angularjs中:$sce.trustAsHtml($scope.snippet).html:ng-bind-html="snippet") 以下代码 ...

  6. 使用log4j输出日志

    今天在倒腾log4j,其实蛮简单的. 一.首先是下载log4j的jar包. 二.将下载的jar包添加到web工程的WEB-INF/lib包下 三.在src/config包下新建log4j.proper ...

  7. angular ng-bind-html $sce.trustAsHtml

    使用ng-bind-html和$sce.trustAsHtml显示有html符号的内容   angularjs的强大之处之一在于它的双向数据绑定的功能,我们通常会使用data-ng-bind或者dat ...

  8. 一篇入门AngularJS

    目录 1.AngularJS 应用 2.AngularJS 指令 3.AngularJS 表达式 4.AngularJS 模型 5.AngularJS 控制器 6.AngularJS 作用域 7.An ...

  9. mapreduce多文件输出的两方法

    mapreduce多文件输出的两方法   package duogemap;   import java.io.IOException;   import org.apache.hadoop.conf ...

随机推荐

  1. HDU 4052 Adding New Machine (线段树+离散化)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4052 初始给你w*h的矩阵,给你n个矩形(互不相交),按这些矩形尺寸把初始的矩形扣掉,形成一个新的'矩 ...

  2. 使用Jena RDF API 开发脚本语言管理资源描述框架模型

    摘要 资源描述框架(Resource Description Framework RDF)是一种以XML格式描述元数据的标准格式.Jena是一种用于将关系数据库或是文本文件中所表示的数据建立为元数据模 ...

  3. Java NIO类库Selector机制解析(上)

    一.  前言 自从J2SE 1.4版本以来,JDK发布了全新的I/O类库,简称NIO,其不但引入了全新的高效的I/O机制,同时,也引入了多路复用的异步模式.NIO的包中主要包含了这样几种抽象数据类型: ...

  4. PDB符号文件信息

    一.前言 这个方法是通过网上的一些方式自己学习枚举PDB文件信息. 二.代码实现 首先枚举驱动文件,这里用psapi库 #include "psapi.h" #pragma com ...

  5. Failed to execute query: Duplicate entry '0' for key 'PRIMARY'

    今天在做php登陆和登出会插入数据到log表中,,结果报错了:如下: Failed to execute query: Duplicate entry '0' for key 'PRIMARY' SQ ...

  6. 8天玩转并行开发——第一天 Parallel的使用

    转自:http://www.cnblogs.com/huangxincheng/archive/2012/04/02/2429543.html 随着多核时代的到来,并行开发越来越展示出它的强大威力,像 ...

  7. HtmlAgilityPack相关网页

    //多线程 http://www.cnblogs.com/jiangming/archive/2012/09/11/MultiThreadCallWebbrowser.html //替换Webbrow ...

  8. nginx 的安装

    一.必要软件准备1.安装pcre 为了支持rewrite功能,我们需要安装pcre 复制代码代码如下: # yum install pcre* //如过你已经装了,请跳过这一步 2.安装openssl ...

  9. RealSense 3D实感体验:前景广阔目前应用少

    腾讯数码讯(周硕)在去年的IDF大会上,英特尔着重展示了其全新的RealSense 3D实感技术,而厚度仅6mm堪称史上最薄平板的戴尔Venue 8 7000也成为首个搭载RealSense技术的产品 ...

  10. codeforce447 D SGU 548 贪心+优先队列

    codeforce447 D - DZY Loves Modification 题意:有一个n*m的矩阵,每次可以选择一行或者一列,可以得到这行或这列的所有元素sum的积分,然后使这一列/行的每一个元 ...