如何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. 数据中台核心方法论--OneModel为何需要产品化支撑?

    什么是产品化 大部分创业公司都是从一个伟大的想法创意开始的,并且需要有一堆技术专家来实现.我们清楚,伟大的技术并不等同于和伟大的产品,技术可以解决问题,但如果它没有办法法规模化,那这些技术或者能力对用 ...

  2. 如何在html中添加引用公共模块文件

    1.首先需要修改apache的配置文件: 打开httpd.conf 搜索“AddType text/html .shtml” 搜索结果: AddType text/html .shtml .html ...

  3. StringUtils 方法全集

    最近做项目需要,经常需要最字符串进行拆分等操作,经搜索和研究,发现了一篇StringUtils方法全集的文章,不错,特贴出来,以后用: 参考:http://blog.sina.com.cn/s/blo ...

  4. Redis入门很简单之三【常见参数配置】

    Redis入门很简单之三[常见参数配置] 博客分类: NoSQL/Redis/MongoDB redisnosql缓存中间件memcached  Redis的一下常见设置都是通过对redis.conf ...

  5. 国内网络安装ubuntu软件慢的解决方法

    以安装scikit-image为例: pip3 install scikit-image==0.13.0 -i https://pypi.tuna.tsinghua.edu.cn/simple 或者 ...

  6. ng-repeat如何限制循环次数

    如果items 里有20条数据,如果你要循环 items, 只想循环5条 你可以这么做:   ng-repeat="item in items|limitTo:5"

  7. Python值正则表达式(RE)

    要想在Python中使用正则表达式,首先要引入模块: import re . 匹配任意一个 +   匹配至少一个 * 匹配0个至多个 ? 1个或0个(可有可无) - 表范围 \ 转义 ^   在首 $ ...

  8. Makefile中几种赋值

    =  延时变量,只有被使用时才展开定义 := 立即变量,定义时的赋值立即有效 ?= 条件变量,当变量为空时才赋值 += 追加赋值

  9. List、Map、Set三个接口存取元素时,各有什么特点

    List接口以特定索引来存取元素,可以有重复元素 Set接口不可以存放重复元素(使用equals方法区分是否重复) Map接口保存的是键值对(key-value-pair)映射,映射关系可以是一对一或 ...

  10. 聚合函数 -AVG/MAX/MIN/STDDEV/VARIANCE/SUM/COUNT/MEDIAN

    ------------------------------------------聚合函数--------------------------------------------- --1: AVG ...