【AngularJs】---$sce 输出Html
【问题描述】
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的更多相关文章
- AngularJS通过$sce输出html的方法
不知道大家有没有发现在用AngularJS作为前端搭建个人博客的时候,发现用AngularJs输出html的时候,浏览器并不解析这些html标签,这里我们需要其显示angular输出的html能被浏览 ...
- Rust笔记
前言: 学了有段时间了,现在同步到博客园. 正文: Rust语言介绍 l Rust由js之父开发的新型语言,打破了传统的难以接触底层的局面.这是个有C++开发的语言.拥有C的血统 l Rust必须严格 ...
- tomcat中配置jndi数据库源
tomcat添加依赖 lib目录下添加依赖mysql-connector-java-8.0.16 配置数据源 介绍两种方法:tomcat中配置或web应用中配置 tomcat/conf/context ...
- web项目Log4j日志输出路径配置问题
问题描述:一个web项目想在一个tomcat下运行多个实例(通过修改war包名称的实现),然后每个实例都将日志输出到tomcat的logs目录下实例名命名的文件夹下进行区分查看每个实例日志,要求通过尽 ...
- 5、AngularJS 直接绑定显示html ($sce、$sanitize服务)
1.直接使用$sce服务(angularjs中:$sce.trustAsHtml($scope.snippet).html:ng-bind-html="snippet") 以下代码 ...
- 使用log4j输出日志
今天在倒腾log4j,其实蛮简单的. 一.首先是下载log4j的jar包. 二.将下载的jar包添加到web工程的WEB-INF/lib包下 三.在src/config包下新建log4j.proper ...
- angular ng-bind-html $sce.trustAsHtml
使用ng-bind-html和$sce.trustAsHtml显示有html符号的内容 angularjs的强大之处之一在于它的双向数据绑定的功能,我们通常会使用data-ng-bind或者dat ...
- 一篇入门AngularJS
目录 1.AngularJS 应用 2.AngularJS 指令 3.AngularJS 表达式 4.AngularJS 模型 5.AngularJS 控制器 6.AngularJS 作用域 7.An ...
- mapreduce多文件输出的两方法
mapreduce多文件输出的两方法 package duogemap; import java.io.IOException; import org.apache.hadoop.conf ...
随机推荐
- oracle对序列的操作
select t.*, t.rowid from tbl_type t order by t.id desc Select SEQ_TBL_TYPE_ID.NextVal From Dual; ; ; ...
- 高扩展的基于NIO的服务器架构(二)
接上文高扩展的基于NIO的服务器架构 Reactor模式 如下图所示,将不同事件的检测分离开,当一种事件发生时一个事件处理器EventHandler将通知与该事件处理相对应的专用工作线程 采用这种架构 ...
- [前端JS学习笔记]JavaScript CallBack
一.概念介绍 CallBack : "回调" . 在spring优秀框架回调无处不在, 回调的运用场景很多, 如 swt事件监听.netty等.它的主要作用是提高程序执行效率, 一 ...
- Nginx学习之十一-Nginx启动框架处理流程
Nginx启动过程流程图 下面首先给出Nginx启动过程的流程图: ngx_cycle_t结构体 Nginx的启动初始化在src/core/nginx.c的main函数中完成,当然main函数是整个N ...
- Flex友好提示、警告
Flex 自带的Alert带给用户的体验并不好,对于一些简单的提示来说,这个小题大作了. <?xml version="1.0" encoding="utf-8&q ...
- IIS功能查看、配置
#获取所有IIS功能列表: get-webconfiguration -filter /system.webserver #查看目录浏览功能的配置信息:Get-WebConfiguration -fi ...
- 【甘道夫】HBase(0.96以上版本号)过滤器Filter具体解释及实例代码
说明: 本文參考官方Ref Guide,Developer API和众多博客.并结合实測代码编写.具体总结HBase的Filter功能,并附上每类Filter的对应代码实现. 本文尽量遵从Ref Gu ...
- 【Cocos2d-x】 HttpClient 网络通信(Http)的简单应用
Cocos2dx 为我们封装了在cocos2dx中http的网络框架,其文件在cocos2dx引擎包的extensions\network文件下的 HttpClient.HttpRequest .Ht ...
- 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 ...
- 【Objective-C】04-第一个OC程序解析
说明:这个Objective-C专题,是学习iOS开发的前奏.也为了让有面向对象语言开发经验的程序猿,可以高速上手Objective-C.假设你还没有编程经验,或者对Objective-C.iOS开发 ...