【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 ...
随机推荐
- [转]eclipse中使用maven插件的时候,运行run as maven build的时候报错
转至:http://fxb4632242.iteye.com/blog/2193945 -Dmaven.multiModuleProjectDirectory system propery is no ...
- 【Java】IO流简单分辨
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/5827509.html Java的IO流体系十分庞大,并且体系层次稍复杂,很容易记混或记错.在此,我把平时经常用 ...
- android studio 2.0 Gradle HttpProxy 设置
Android Studio 一直Failed to import Gradle project: Connection timed out: connect Android Studio 2.0 里 ...
- PostgreSQL的schema信息,存储于何处
查看schema信息: [pgsql@localhost bin]$ ./psql psql () Type "help" for help. pgsql=# create sch ...
- string和stringbuilder的解剖
String和StringBuilder的深入解析 前言:本文出发点是我们开发的过程中是否真正的理解stringbuilder的使用,string字符串操作的是如何实现(哈希表),stringbu ...
- cocos2d-x如何优化内存的应用
自身以前也写过cocos2d-x如何优化内存的应用,以及内存不够的情况下怎么样处置惩罚游戏.今天在微博中看到有友好简介了下内存,挺详细的.不晓得是谁写的,我纪录下. 一,IOS与图片内存 在IOS上, ...
- web开发技术点解析
一.控件篇 1.radio控件 在创建单选控件时,要做到多个radio有单选功能.必须把多个radio的name属性值设置为同样的,否则,多个radio之间是没有联系的. 二.样式篇 1.获取图片中的 ...
- android142 360 分页加载
dao: package com.itheima.mobileguard.db.dao; import java.util.ArrayList; import java.util.List; impo ...
- android139 360 黑名单 增删改查-数据库操作
BlackNumberOpenHelper.java package com.itheima52.mobilesafe.db.dao; import android.content.Context; ...
- quickstack is a tool to take call stack
https://github.com/yoshinorim/quickstack quickstack is a tool to take call stack traces with minimal ...