Safely render arbitrary HTML snippets by using ngSanitize and $sce.

By default angularJS consider user's input html is danger, so if you want to display html tag on the page will show unsafe error.

To remove this error and trust user's input, we can install ngSanitize:

bower install angular-sanitize
var egghead = angular.module("egghead", ["ngSanitize"]);

egghead.controller("AppCtrl", function () {

    var app = this;

    app.someHtml = '<a href="http://egghead.io" style="color:red">Learn stuff!</strong>';

});
<!DOCTYPE html>

<html>

<head>

    <title>Egghead.io</title>

    <link rel="stylesheet" href="bower_components/bootstrap.css/css/bootstrap.css"/>

</head>

<body ng-app="egghead" ng-controller="AppCtrl as app">

<textarea name="" id="" cols="30" rows="10" ng-model="app.someHtml"></textarea>

<div ng-bind-html="app.someHtml"></div>

<script src="bower_components/angular/angular.js"></script>

<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

<script src="app.js"></script>

</body>

</html>

Then the error message has gone, but we didn't get the result which we want, we want "Learn stuff" shown  in red color:

<a href="http://egghead.io" style="color:red">Learn stuff!</strong>

To overcome this, we can use $sce service:

var egghead = angular.module("egghead", ["ngSanitize"]);

egghead.controller("AppCtrl", function ($sce) {

    var app = this;

    app.someHtml = $sce.trustAsHtml('<a href="http://egghead.io" style="color:red">Learn stuff!</strong>');

});

Also you can trust as javascript, css && url:

see here: https://docs.angularjs.org/api/ng/service/$sce

[AngularJS] Html ngSanitize, $sce的更多相关文章

  1. 5、AngularJS 直接绑定显示html （$sce、$sanitize服务）

    1.直接使用$sce服务(angularjs中:$sce.trustAsHtml($scope.snippet).html:ng-bind-html="snippet") 以下代码 ...

  2. 《AngularJS学习整理》系列分享专栏

    <AngularJS学习整理>系列分享专栏   <AngularJS学习整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/re ...

  3. ngBind ngBindTemplate ngBindHtml

    ng-bind: 只能绑定一个变量 在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: <p>{{titleStr}}</p> 另一种是使用基于属 ...

  4. 前端安全（XSS、CSRF防御）

    一.网络安全          OWASP:开放式Web应用程序安全项目(OWASP,Open Web Application Security Project)        OWASP是一个开源的 ...

  5. AngularJs $sce 和 $sceDelegate 上下文转义

    $sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 严格的上下文转义服务 严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模 ...

  6. AngularJS 使用$sce控制代码安全检查

    由于浏览器都有同源加载策略,不能加载不同域下的文件.也不能使用不合要求的协议比如file进行访问. 在angularJs中为了避免安全漏洞,一些ng-src或者ng-include都会进行安全校验,因 ...

  7. 【AngularJs】---$sce 输出Html

    [问题描述] angular js的强大之处之一就是他的数据双向绑定功能----->ng-bind和针对form的ng-model 但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各 ...

  8. AngularJS通过$sce输出html的方法

    不知道大家有没有发现在用AngularJS作为前端搭建个人博客的时候,发现用AngularJs输出html的时候,浏览器并不解析这些html标签,这里我们需要其显示angular输出的html能被浏览 ...

  9. angularjs通过ng-bind-html指令和$sce服务绑定html

    代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...

随机推荐

  1. Redis入门教程：特性及数据类型的操作

    虽然Redis已经很火了,相信还是有很多同学对Redis只是有所听闻或者了解并不全面,下面是一个比较系统的Redis介绍,对Redis的特性及各种数据类型及操作进行了介绍.是一个很不错的Redis入门 ...

  2. SQL 的一些概念问答

    1．触发器的作用? 答:触发器是一中特殊的存储过程,主要是通过事件来触发而被执行的.它可以强化约束,来维护数据的完整性和一致性,可以跟踪数据库内的操作从而不允许未经许可的更新和变化.可以联级运算.如, ...

  3. Windows下使用NCL（Cygwin模拟Linux环境）

    参考自:http://bbs.lasg.ac.cn/bbs/thread-37043-1-1.html 1.下载 所需文件均可在此下载:http://yunpan.cn/cQsvAEe3Axs2Z   ...

  4. 基于MFC和opencv的FFT

    在网上折腾了一阵子,终于把这个程序写好了,程序是基于MFC的,图像显示的部分和获取图像的像素点是用到了opencv的一些函数,不过FFT算法没有用opencv的(呵呵,老师不让),网上的二维的FFT程 ...

  5. 【原】Storm实战

    3.Storm实战 如何新建一个Storm 项目 本文简要概括如何新建一个Storm项目,步骤如下: 1.添加Storm 相关jar添加到类路径上. 2.如果使用多语言特性,将多语言实现的目录加到cl ...

  6. 学习Python编程的11个资源

    用 Python 写代码并不难,事实上,它一直以来都是被声称为最容易学习的编程语言.如果你正打算学习 web 开发,Python 是一个不错的选择,甚至你想学游戏开发也可 以从 Python 开始,因 ...

  7. C++继承与派生的概念、什么是继承和派生

    在C++中可重用性是通过继承(inheritance)这一机制来实现的.因此,继承是C++的一个重要组成部分. 前面介绍了类,一个类中包含了若干数据成员和成员函数.在不同的类中,数据成员和成员函数是不 ...

  8. leetcode—sqrt

    1.题目描述   Implement int sqrt(int x).   Compute and return the square root of x. 2.解法分析 很明显,用二分搜索可解,但是 ...

  9. java集合框架复习

    数组类Array是java中最基本的一个存储结构,它用于存储 一组连续的对象或一组类型相同的基本类型的数据. Array特点:效率高,但容量固定且无法动态改变, 缺点:无法判断其中存有多少元素,len ...

  10. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇04：碰撞检测》

    4.碰撞检测 碰撞概述: 游戏世界里,游戏对象不能做出如同在真实世界里的物理运动效果.对于大部分游戏来说,都要为其添加物理系统,让其可以模拟真实世界发生的物理运动.但是在这个打飞机游戏Demo中,是用 ...