Angularjs 1.3在页面中输出带Html标记的文本
如何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>
文章参考资料:http://www.cnblogs.com/mingziday/p/4824899.html
Angularjs 1.3在页面中输出带Html标记的文本的更多相关文章
- 如何Angularjs1.3在页面中输出带Html标记的文本
基于安全考虑,Angularjs不允许用ng-bind或者{{}}的方法输出html文本. 在实际的应用中,比如信息管理系统,用在线编辑器编辑出来的文章都带有html标记,这种情况下可以用ng-bin ...
- 如何设置HTML页面中文本的字体
字体属性介绍 CSS中的字体属性是干什么的呢?字体字体肯定和字体有关咯,就是设置HTML页面中文本的字体, CSS中常用的字体属性有几种呢,笔者给大家梳理了下,比较常用的一共有5种,今天我们就看看这5 ...
- jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- AngularJs调用NET MVC 控制器中的函数进行后台操作
题目中提到的控制器指的是.NET MVC的控制器,不是angularjs的控制器. 首先看主页面的代码: <!DOCTYPE html> <html> <head> ...
- AngularJS在IE下页面缓存问题
问题: 在使用AngularJS发出请求(GET)获取服务端数据,然后再绑定到页面中,你会发现在IE中总是显示原来的数据结果.这时候我们就会知道,IE做了缓存. 解决办法: 我们可以在AngularJ ...
- 页面中多个script块之间的关系
一:函数声明与函数定义表达式在函数调用间的区别 <script type="text/javascript"> doA(); var doA = function(a ...
- 【手记】WebBrowser响应页面中的blank开新窗口及window.close关闭本窗体
注:本文适用.net 2.0+的winform项目 目的: 点击页面中的target="_blank"链接时,弹出新窗体 页面中有window.close()操作时,关闭窗体 上述 ...
- 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数
[问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...
- WEB页面中常见的四种控件的必须的测试
以下为常规的需求,除非需求有明确说明,如密码输入框中可以输入空格. 输入框 1. 为空,但页面中明确说明不能为空(带有星号或者只有这一个输入框),有以下两种情况: a. 不进行输入或者使其为空:焦 ...
随机推荐
- ruby puts语法
str = "Welcom to china" str1 = str puts str + " 1" puts str1 + " 1" de ...
- Service系统服务(六):rsync基本用法、rsync+SSH同步、配置rsync服务端、访问rsync共享资源、使用inotifywait工具、配置Web镜像同步、配置并验证Split分离解析
一.rsync基本用法 目标: 本例要求掌握远程同步的基本操作,使用rsync命令完成下列任务: 1> 将目录 /boot 同步到目录 /todir 下 2> 将目录 /boot 下的 ...
- mysql数据库帐号权限设置
1.创建帐号 2.给帐号赋权限(xinjinlong帐号只有查看sakila表的权限) 3.更改密码 4.取消授权 revoke all on *.* from sss@localhost ;
- HP Server BIOS实验报告
原文链接http://www.hpiss.com/3924.html 注意:红色字体为HP手册中查找到的资源,及个人感觉应该注意的一些信息,个人翻译的也为红字体,网络中自行查找到的资源,以及询问各位师 ...
- python中输入多个数字(代码实现)
不多说,直接上代码: list1 = [] #定义一个空列表 str1 = input("请输入数值,用空格隔开:") # list2 = str1.split(" &q ...
- pandas 使用出现的问题汇总
问题1:<bound method NDFrame.head of 刚开始还以为是自己的数据集有问题,怎么显示不对呢! 解决: 仔细观察,是自己给的输出有问题,data.head什么鬼??? 正 ...
- h5唤醒手机拨打电话
jquery : $("#a").attr("href","tel:110");
- Tomcat发布项目的几种方式
如何在浏览器访问一个xml文件 拷贝这个文件到webapps/ROOT底下, 在浏览器里面访问 直接把tomcat/webapps/ROOT目录下 浏览器访问http://localhost:8080 ...
- spring事务实现的几种方式
1.编程式事务管理对基于POJO的应用来说是唯一选择. 需要在代码中调用 beginTransaction() commit() rollback()等事务管理相关的方法. 2.基于Transacti ...
- 自定义vant ui steps组件效果实现
记录个问题,当作笔记吧:因为vue项目的移动端vant ui 的step组件跟ui设计图有差别,研究了半天还是没法使用step组件,只能手动设置一个 先上效果图和代码: (1)HTML部分 <d ...