【问题描述】

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. oracle对序列的操作

    select t.*, t.rowid from tbl_type t order by t.id desc Select SEQ_TBL_TYPE_ID.NextVal From Dual; ; ; ...

  2. 高扩展的基于NIO的服务器架构(二)

    接上文高扩展的基于NIO的服务器架构 Reactor模式 如下图所示,将不同事件的检测分离开,当一种事件发生时一个事件处理器EventHandler将通知与该事件处理相对应的专用工作线程 采用这种架构 ...

  3. [前端JS学习笔记]JavaScript CallBack

    一.概念介绍 CallBack : "回调" . 在spring优秀框架回调无处不在, 回调的运用场景很多, 如 swt事件监听.netty等.它的主要作用是提高程序执行效率, 一 ...

  4. Nginx学习之十一-Nginx启动框架处理流程

    Nginx启动过程流程图 下面首先给出Nginx启动过程的流程图: ngx_cycle_t结构体 Nginx的启动初始化在src/core/nginx.c的main函数中完成,当然main函数是整个N ...

  5. Flex友好提示、警告

    Flex 自带的Alert带给用户的体验并不好,对于一些简单的提示来说,这个小题大作了. <?xml version="1.0" encoding="utf-8&q ...

  6. IIS功能查看、配置

    #获取所有IIS功能列表: get-webconfiguration -filter /system.webserver #查看目录浏览功能的配置信息:Get-WebConfiguration -fi ...

  7. 【甘道夫】HBase(0.96以上版本号)过滤器Filter具体解释及实例代码

    说明: 本文參考官方Ref Guide,Developer API和众多博客.并结合实測代码编写.具体总结HBase的Filter功能,并附上每类Filter的对应代码实现. 本文尽量遵从Ref Gu ...

  8. 【Cocos2d-x】 HttpClient 网络通信(Http)的简单应用

    Cocos2dx 为我们封装了在cocos2dx中http的网络框架,其文件在cocos2dx引擎包的extensions\network文件下的 HttpClient.HttpRequest .Ht ...

  9. SpringMVC4.2.4 xml配置

    环境:1.基于spring4.2.4版本,也是spring当前(2016.2)最新的GA版本 2.maven 3.2.1 3.jdk1.7 xml配置1: web.xml <?xml versi ...

  10. 【Objective-C】04-第一个OC程序解析

    说明:这个Objective-C专题,是学习iOS开发的前奏.也为了让有面向对象语言开发经验的程序猿,可以高速上手Objective-C.假设你还没有编程经验,或者对Objective-C.iOS开发 ...