如何Angularjs1.3在页面中输出带Html标记的文本

基于安全考虑,Angularjs不允许用ng-bind后者{{}}的方法输出html文本。

在实际的应用中,比如信息管理系统,用在线编辑器编辑出来的文章都带有html标记,这种情况下可以用ng-bind-html将其输出到前台页面。

1、在前台页面中包含sanitize.js

<script type="text/javascript" src="webjars/angular-sanitize/1.3.11/angular-sanitize.min.js"></script> 

2、在mode、和controller增加对html文本的安全过滤

angular.module(‘scenceApp‘,[‘ui.router‘,‘ngResource‘,‘ngSanitize‘,‘restangular‘])
.controller(‘scenceViewController‘,function($scope,Restangular,$stateParams, $sce){
    Restangular.one("scences",$stateParams.id).get().
     then(function(data) {
        $scope.scence = data;
        $scope.scence.info = $sce.trustAsHtml(data.info); //对info字段进行安全过滤
     });
})

3、在前台页面中用ng-bind-html绑定

<div ng-bind-html="scence.info"></div>
时间: 2024-10-11 13:09:42

如何Angularjs1.3在页面中输出带Html标记的文本的相关文章

在JSP页面中获取本页的文本框值(亲测可用)

对我很有用,就记在这了,方便再学习. 项目中用到一个查询条件,点击查询后,需要将结果显示在本页中.但是需要能在本页面中取值,如何不通过别的页面或action/servlet第三方来获得该文本框的值呢.百思不得其解...... 还是我们老大见多识广,在高人指点下不费吹灰之力就解决了(但是需要在JSP页面中写JAVA代码) 首先是一个form表单,里面有一个文本框或其它的表单项 <form name="thisform"method="post"><i

使用jQuery的data方法来为页面中的某个元素存储数据,(获取焦点,清除默认值)

使用data方法可以避免在DOM中存储数据,有些前端开发er喜欢使用HTML的属性来存储数据: 使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的. 我们可以使用jQuery的data方法来为页面中的某个元素存储数据: html部分: 1 <form id="testform"> 2 <input type="text" class="clear" value="Always cleared&qu

表单提交时如何将错误信息传递到页面中,并且保存原来提交数据

曾经何时,你还有我或许都在困惑,如何方便的将验证不通过的表单信息再返回到前台页面,例如我注册一个账号,辛辛苦苦填写了N多项,一个格式验证没有通过,一切都需要充填,虽然Ajax可以解决这个问题,但是我们总不能把所有表单提交都弄成ajax,更何况有若干人就是没事把javascript给禁止了.哎哎,好了解决方案来了,下面以用户登录为例,说说我的解决方案. 服务器端用nodejs实现: login.html 简单的提交表单 <form action="" id="loginF

在Exchange 2013 OWA登录页面中修改密码

透过OWA登录界面改密码对于使用Exchange的用户来说是一个很有有用的功能. 因为如果用户不在公司域环境中,当密码已经到期登录不了OWA,就没有办法通过OWA中的[选项]来改密码,当开启这项功能后,管理员和用户都可以很方便的处理密码到期的case. 早在Exchange2010的时候,我们需要通过修改CAS服务器的注册表项来实现这个功能.现在的Exchange2013已经内置了该功能,使用前只需要确认该功能属性的状态就可以了. 在最新的Exchange2013 SP1和CU5版本中,此功能在

使用选择器在页面中插入内容

我不知道是否有其他人能看见我写的内容,由于我是一个渣渣,很多内容都不知道,所以将这些很简单的东西都记录下来,希望不小心点进来的大神们,能吐槽一下我,呃指点一下我.和我一样的小白们希望能相互学习,谢谢了. 在css中可以使用before伪元素选择器 after伪元素选择器在页面中插入内容,而插入的内容由content属性来定义     一:使用选择器来插入文字 使用选择器来插入文字,在插入的内容是文字时要在文字的两旁加入单引号或者双引号. 为了使插入的内容美观,可以在选择器中加入添加的内容的样式

JSF页面中使用js函数回调后台bean方法并获取返回值的方法

由于primefaces在国内使用的并不是太多,因此,国内对jsf做系统.详细的介绍的资料很少,即使有一些资料,也仅仅是对国外资料的简单翻译或者是仅仅讲表面现象(皮毛而已),它们的语句甚至还是错误的,很可能会误导使用者. 相对来说,看国内的那些仅仅是翻译过来的文章或书籍不如直接看国外的官方文档或资料来的实在,在我讲述jsf页面中如何使用js调用后台bean方法之前,先给大家说几个国外的资料.在primefaces官方网站上,你可以搜索到几乎所有你需要的东西,primefaces官网为:http:

获取元素在页面中left,top值(忽略其父级的定位)

函数用到的属性有: element.offsetLeft 返回当前元素的相对水平偏移位置的偏移容器 element.offsetParent 返回元素的偏移容器 element.offsetTop 返回当前元素的相对垂直偏移位置的偏移容器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</ti

jauery加入项目中,但是在页面中显示没有找到这个文件--springMVC框架

遇到一件很不爽的事情,自己明明已经把jquery的文件放在了项目中,但是在页面中总是看不到效果,开发者模式提示没有找到文件,当时都要郁闷疯了,后来无意间看到了Eclipse中报的错,怎么与Spring的配置文件相关,就去看看,看到<mvc:resource="/css/**" />这个配置,是css的配置,然后就照毛画虎的写了个js的标签,然后就可以了.我前台写的是basepath/script/jqurey.mini.js String path = request.ge

jQuery基础学习5——JavaScript方法获取页面中的元素

给网页中的所有<p>元素添加onclick事件 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head>