angular ng-bind-html $sce.trustAsHtml
angularjs的强大之处之一在于它的双向数据绑定的功能，我们通常会使用data-ng-bind或者data-ng-model来绑定数据。但是在项目中很多数据都带有各种各样的html标签，而angularjs绑定的数据都会默认以文本的形式输出，并不会去识别html标签，这样做主要是为了防止html标签中的注入攻击，提高了安全性。那么如何显示这些html标签呢？
主要有两种方法：
<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的更多相关文章
- angular源码分析：angular中入境检察官$sce
一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...
- angular ng build --prod 打包报错解决方案
使用以下代码 就不报错了 ng build --prod --no-extract-license 打包命令 使用以下代码 就不报错了 ng build --prod --no-extrac ...
- angular ng指令
1.指令 ng-app,ng- 都是angular的指令系统ng-app: ng-app是angular的初始化,一个页面只能有一个ng-app,位置不限制.在页面上加入了这个执行,那么从当前的元素以 ...
- angular中的ng-bind-html指令和$sce服务
angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...
- Angular - - $sce 和 $sceDelegate
$sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 严格的上下文转义服务 严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模 ...
- angular中的ng-bind-html和$sce服务
输入的内容存储在数据库中,然后再在数据库中将这些数据读写到页面上,比如你使用了某个第三方的脚本或者库.加载了一段html等等,可能会多了一些css的样式(显示在界面上) 这个时候我们可以利用angul ...
- angular用$sce服务来过滤HTML标签
angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...
- 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
- 在 Angular 中实现搜索关键字高亮
在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...
随机推荐
- webservice和wcf和web.api简单介绍
转自:无废话的wcf等等 在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下,你有很多的选择来构建一个HTTP Ser ...
- WEB测试—功能测试
1. 链接测试 1.1 测试点: 是否添加链接 链接页面是否存在 链接页面与需求是否一致:页面的正确性.打开方式 等 一般,该链接测试在集成测试阶段(页面均开发 ...
- 十、IntelliJ IDEA 中 Project 和 Module 的概念及区别
在 IntelliJ IDEA 中,没有类似于 Eclipse 工作空间(Workspace)的概念,而是提出了Project和Module这两个概念.接下来,就让咱们一起看看 IntelliJ ID ...
- [转]order by 1是什么意思？
ORDER BY 1 表示 所select 的字段按第一个字段排序 ORDER BY ASC应该没有这样写法,ORDER BY 后面不是字段就是数字, 可以ORDER BY 1 ASC 或者ORDER ...
- HDU 2036 改革春风吹满地 （求多边形面积）
传送门: 改革春风吹满地 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...
- Jquery获取select标签的值、文本方式
<script> function add(){ var prop_name=$("#prop").find("option:selec ...
- sharePoint中简单的父页面跳转子页面代码！
1,SharePoint中挺简单的一个父页面跳转到子页面的Js代码!常常用到,每次都到以前的项目中去找代码,挺麻烦! (1)父页面代码. function imgAddParentclick() { ...
- 课时46.label标签（掌握）
我们点击QQ注册页面,发现了一个问题,当我们点击密码两个字的时候,输入框聚焦了,而点击确认密码的时候,输入框也聚焦了,而我们上节课做的页面,这么点击,并不聚焦 1.默认情况下文字和输入框是没有关联关系 ...
- input 输入的一些限制说明
input输入框 只能输入 数字可以有小数点 <input class="form_text" id="purchasePrice" name=" ...
- 多用户OFDM系统资源分配研究
首先,OFDMA 是什么? OFDM 技术的基本原理是将无线信道划分为若干互相正交的子信道,把高速串行数据流转化为低速并行子数据流,低速并行子数据流在子信道上独立传输. OFDMA 是LTE的下行多址 ...