使用ng-bind-html和$sce.trustAsHtml显示有html符号的内容
 

angularjs的强大之处之一在于它的双向数据绑定的功能，我们通常会使用data-ng-bind或者data-ng-model来绑定数据。但是在项目中很多数据都带有各种各样的html标签，而angularjs绑定的数据都会默认以文本的形式输出，并不会去识别html标签，这样做主要是为了防止html标签中的注入攻击，提高了安全性。那么如何显示这些html标签呢？

主要有两种方法：

1.过滤器
<body ng-app="myApp" ng-controller="myCtl">

    <div ng-bind-html="htmlContent | to_trusted">

    </div>

</body>

<script>

    var app = angular.module('myApp', []);

    app.controller('myCtl',['$scope', function($scope){

        $scope.htmlContent = '<h1 style="color: orange">wednesday</h1>';

    }]);

    app.filter('to_trusted', ['$sce', function ($sce) {

　　  return function (text) {

    　　  return $sce.trustAsHtml(text);

　　};

}]);

</script>

2.$sce.trustAsHtml

<body ng-app="myApp" ng-controller="myCtl">

    <div ng-bind-html="content">

    </div>

</body>
<script>

    var app = angular.module('myApp', []);

    $scope.content="My name is: <h1>John Doe</h1>";

    app.controller('myCtl',['$scope','$sce', function($scope,$sce){

        $scope.content = $sce.trustAsHtml( $scope.content );

    }]);

</script>

这里主要有地方要注意：

1. ng-bind-html指令是通过一个安全的方式将内容绑定到HTML元素上，该属性依赖于$sanitize，需要在项目中引入angular-sanitize.js文件，并在module定义时注入该服务ngSanitize。

2.通过ng-bind-html指令绑定html元素，为什么还需要$sce？

这是因为如果在angularjs中绑定的数据有html标签时，如上面的<h1>,会被angularjs认为是不安全的而自动过滤掉，为了保留这些标签就需要开启非安全模式，这是非常危险的。$sce是angularJS自带的安全处理模块，因此需要$sce.trustAsHtml()方法将数据内容以html的形式解析并返回。

3.几种绑定方式的对比

(1)ng-bind-html和内置的$sanitize服务

$sanitize会自动对html标签进行净化，并会把标签的属性以及绑定在元素上的事件都移除，仅保留了标签和内容。

(2)ng-bind-html和$sce.trustAsHtml()

它不再经过sanitize服务的净化，直接作为元素的.html()绑定给元素,保留所有的属性和事件，这一行的内容不依赖于ngSanitize模块,$sce服务是内置的。

(3)ng-bind

绑定的值就作为字符串填充到元素里。

使用ng-bind-html容易引起XSS(脚本注入攻击)，这一点一定要注意。

angular ng-bind-html $sce.trustAsHtml的更多相关文章

  1. angular源码分析：angular中入境检察官$sce

    一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...

  2. angular ng build --prod 打包报错解决方案

    使用以下代码  就不报错了 ng build --prod --no-extract-license    打包命令 使用以下代码  就不报错了 ng build --prod --no-extrac ...

  3. angular ng指令

    1.指令 ng-app,ng- 都是angular的指令系统ng-app: ng-app是angular的初始化,一个页面只能有一个ng-app,位置不限制.在页面上加入了这个执行,那么从当前的元素以 ...

  4. angular中的ng-bind-html指令和$sce服务

    angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...

  5. Angular - - $sce 和 $sceDelegate

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

  6. angular中的ng-bind-html和$sce服务

    输入的内容存储在数据库中,然后再在数据库中将这些数据读写到页面上,比如你使用了某个第三方的脚本或者库.加载了一段html等等,可能会多了一些css的样式(显示在界面上) 这个时候我们可以利用angul ...

  7. angular用$sce服务来过滤HTML标签

    angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...

  8. 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  9. 在 Angular 中实现搜索关键字高亮

    在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...

随机推荐

  1. ADF系列-3.VO的查询

    一·VO的计数查询 VO的计数查询有四种方式: 1.ViewObjectImpl::getRowCount() 这个方法从数据库中提取所有行,然后对每一行计数, 得到总行数.如果行数很大,这会影响性能 ...

  2. Codeforces Round #528 (Div. 2, based on Technocup 2019 Elimination Round 4) C. Connect Three 【模拟】

    传送门:http://codeforces.com/contest/1087/problem/C C. Connect Three time limit per test 1 second memor ...

  3. DataTables.Queryable Sample

    1.DataTables.Queryable的例子项目使用了SQL Server CE数据库,花了几分钟时间转为使用LocalDB. 完整Web.config文件如下: <?xml versio ...

  4. PHP日志 LOG4PHP 的配置与使用

    维护了 一个老项目, 没有日志功能, 就给加了这个log4php,  主要是集成进去很简单,使用起来也够用了. 1.下载log4php 2.创建配置文件 log4php_config.xml < ...

  5. java中StringBuffer与String、StringBuilder的区别

    在java中我们经常可以看到StringBuffer和String的用法,但是我自己在使用过程中,经常会将两者弄混淆,今天我们就来了解一下两者的区别: 我们首先来看一下我们的官方API中的简单介绍: ...

  6. 【luogu P1073 最优贸易】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1073 对于状态量相互影响的题目,分层图是个不错的想法. 考虑在题目中分为: 不交易: 直接从1到n出去,为0 ...

  7. 2.java编辑器和java大致内容

    离开了宇宙第一IDE.对java的编辑的选择有点茫然. .net只有一个你不用选择.java好几个.对于追求完美的我来说.总想选个完美的.上网百度可一下.最经典的当然是eclipse了. 但是觉得有点 ...

  8. ARM v7-A 系列CPU的MMU隐射分析

    ARM v7-A 系列CPU的MMU隐射分析 摘要:ARM v7-A系列的CPU加入了很多扩展,如多核处理器扩展.大物理地址扩展.TrustZone扩展.虚拟化扩展.若支持大的物理地址,则必须支持多核 ...

  9. OSMboxPost()

    1.向邮箱发送一则消息 2.原型:INT8U OSMboxPost(OS_EVENT *pevent, void *msg) 3. pevent: 消息邮箱指针(ECB指针) msg:   消息指针 ...

  10. I/O复用——各种不同的IO模型

    一.概述 我们看到上面的TCP客户同时处理两个输入:标准输入和TCP套接字.我们遇到的问题就是在客户阻塞于(标准输入上的)fgets调用期间,服务器进程会被杀死.服务器TCP虽然正确地给客户TCP发送 ...