如何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标记的文本的更多相关文章

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

    基于安全考虑,Angularjs不允许用ng-bind或者{{}}的方法输出html文本. 在实际的应用中,比如信息管理系统,用在线编辑器编辑出来的文章都带有html标记,这种情况下可以用ng-bin ...

  2. 如何设置HTML页面中文本的字体

    字体属性介绍 CSS中的字体属性是干什么的呢?字体字体肯定和字体有关咯,就是设置HTML页面中文本的字体, CSS中常用的字体属性有几种呢,笔者给大家梳理了下,比较常用的一共有5种,今天我们就看看这5 ...

  3. jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

  4. AngularJs调用NET MVC 控制器中的函数进行后台操作

    题目中提到的控制器指的是.NET  MVC的控制器,不是angularjs的控制器. 首先看主页面的代码: <!DOCTYPE html> <html> <head> ...

  5. AngularJS在IE下页面缓存问题

    问题: 在使用AngularJS发出请求(GET)获取服务端数据,然后再绑定到页面中,你会发现在IE中总是显示原来的数据结果.这时候我们就会知道,IE做了缓存. 解决办法: 我们可以在AngularJ ...

  6. 页面中多个script块之间的关系

     一:函数声明与函数定义表达式在函数调用间的区别 <script type="text/javascript"> doA(); var doA = function(a ...

  7. 【手记】WebBrowser响应页面中的blank开新窗口及window.close关闭本窗体

    注:本文适用.net 2.0+的winform项目 目的: 点击页面中的target="_blank"链接时,弹出新窗体 页面中有window.close()操作时,关闭窗体 上述 ...

  8. 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数

    [问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...

  9. WEB页面中常见的四种控件的必须的测试

    以下为常规的需求,除非需求有明确说明,如密码输入框中可以输入空格.   输入框 1. 为空,但页面中明确说明不能为空(带有星号或者只有这一个输入框),有以下两种情况: a. 不进行输入或者使其为空:焦 ...

随机推荐

  1. apue 第6章 系统数据文件和信息

    在给出用户登录名或数值用户ID后,这两个函数就能查看相关项. #include <sys/types.h> #include <pwd.h> struct passwd *ge ...

  2. JRE和JVM的区别

    JRE和JVM的区别       JRE(JavaRuntimeEnvironment,Java运行环境),也就是Java平台.所有的Java程序都要在JRE下才能运行.JDK的工具也是Java程序, ...

  3. 【dart学习】-- Dart之async和await

    一,概述 在Dart1.9中加入了async和await关键字,有了这两个关键字,我们可以更简洁的编写异步代码,而不需要调用Future相关的API.他们允许你像写同步代码一样写异步代码和不需要使用F ...

  4. javaweb登录验证码的实现

    第一种 第一步:  JSP <li><input name="validCode"  id="validCode" type="te ...

  5. 6. 使用cadvisor监控docker容器

    Prometheus监控docker容器运行状态,我们用到cadvisor服务,cadvisor我们这里也采用docker方式直接运行.这里我们可以服务端和客户端都使用cadvisor 客户端 1.下 ...

  6. MySQL的安装配置(无坑

    简单记录一下自己掉坑无数之后,终于找到的一个不坑的方法. 一.安装 #进入一个习惯的文件夹 cd /usr/local/src #下载资源包 wget -i -c http://dev.mysql.c ...

  7. 转 jmeter 实现loadrunner init end 功能

    一.JMeter 介绍 Apache JMeter是100%纯JAVA桌面应用程序,被设计为用于测试客户端/服务端结构的软件(例如web应用程序).它可以用来测试静态和动态资源的性能,例如:静态文件, ...

  8. Spring Cloud服务安全连接

    Spring Cloud可以增加HTTP Basic认证来增加服务连接的安全性. 1.加入security启动器 在maven配置文件中加入Spring Boot的security启动器. <d ...

  9. 【题解】Ride to Office

    题目描述 起点与终点相隔4500米.现Charley 需要从起点骑车到终点.但是,他有个习惯,沿途需要有人陪伴,即以相同的速度, 与另外一个人一起骑.而当他遇到以更快的速度骑车的人时,他会以相应的速度 ...

  10. elementUI 限制上传个数limit

    :limit='1' // 个数限制.