为什么要要$sce？因为angularJS里好些地方，比如路径默认是个字符串，不会认为是路径，从而访问不到我们需要的东西，那么我们就可以通过$sce告诉angualrJS这个路径，这样是很安全滴。它有以下几种：

$sce.trustAs(type,name);
$sce.trustAsUrl(value);
$sce.trustAsHtml(value);
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);

1.trustAsResourceUrl

<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body><div ng-app="myApp" ng-controller="myCtrl">第一种方式：<br/>有$sce处理：<audio  ng-src="{{sceControl(formData.mediaUrl)}}"  controls="controls">您的浏览器不支持html5</audio><br/>无$sce处理：<audio  ng-src="{{formData.mediaUrl}}"  controls="controls">您的浏览器不支持html5</audio><br/><br/>第二种方式：<br/><audio  ng-src="{{data.url}}"  controls="controls">您的浏览器不支持html5</audio>
</div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope,$sce){//第一种方式数据源$scope.formData={"name":"视频","mediaUrl":"http://res.audiogroup.cn/res/upload/agx_ims_creative/audio/20160307/bpryk96.mp3"//视频路径};      $scope.sceControl = $sce.trustAsResourceUrl;//第一种处理方式//第二种方式数据源$scope.data={"name":"视频","url":"http://res.audiogroup.cn/res/upload/agx_ims_creative/audio/20160307/bpryk96.mp3"//视频路径};  $scope.data.url = $sce.trustAsResourceUrl($scope.data.url);//第二种处理方式});
</script>
</body>
</html>

2.trustAsHtml

<body>
<div ng-app="myApp" ng-controller="myCtrl">未处理的：<div ng-repeat="item in formData">{{item.name}} :{{item.htmlVal}}</div><br/>处理过的：<button ng-click="look()">查看处理结果</button><div ng-repeat="item in data">{{item.name}} :<p ng-bind-html = "item.htmlVal"></p></div>
</div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope,$sce){//未处理数据源$scope.formData=[{"name":"张春玲","htmlVal":"我是<span style='color:red;'>张春玲<span>"},{"name":"sb","htmlVal":"我是<span style='color:red;'>sb<span>"}];  //处理结果$scope.look = function(){alert$scope.data=[{"name":"张春玲","htmlVal":"我是<span style='color:red;'>张春玲<span>"},{"name":"sb","htmlVal":"我是<span style='color:red;'>sb<span>"}];for(var i=0;i<$scope.data.length;i++){$scope.data[i].htmlVal = $sce.trustAsHtml($scope.data[i].htmlVal);}};});
</script>
</body>

深究AngularJS——$sce的使用相关推荐

Angular - - $sce 和 $sceDelegate
$sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 严格的上下文转义服务严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模 ...
运维经验分享（六）-- 深究crontab不能正确执行Shell脚本的问题（二）
运维经验分享作为一个专题,目前共7篇文章 <运维经验分享(一)-- Linux Shell之ChatterServer服务控制脚本> <运维经验分享(二)-- Linux Shell ...
AngularJS 使用$sce控制代码安全检查
阅读目录什么是SCE 来自官网的例子:ng-bind-html 实际工作中的例子:ng-src链接参考由于浏览器都有同源加载策略,不能加载不同域下的文件.也不能使用不合要求的协议比如fi ...
一分钟深入Mysql的意向锁——《深究Mysql锁》
延伸阅读: 三分钟了解Mysql的表级锁五分钟了解Mysql的行级锁 mysql锁相关讲解及其应用--<深究mysql锁>了解锁前,一定要先看这篇,了解什么是MVCC,如果我们学习锁,没 ...
五分钟了解Mysql的行级锁——《深究Mysql锁》
延伸阅读: 三分钟了解Mysql的表级锁一分钟深入Mysql的意向锁 mysql锁相关讲解及其应用--<深究mysql锁>了解锁前,一定要先看这篇,了解什么是MVCC,如果我们学习锁,没 ...
三分钟了解Mysql的表级锁——《深究Mysql锁》
延伸阅读: 五分钟了解Mysql的行级锁一分钟深入Mysql的意向锁 mysql锁相关讲解及其应用--<深究mysql锁>了解锁前,一定要先看这篇,了解什么是MVCC,如果我们学习锁,没 ...
CISCO SCE 第三部分 SCE平台的升级
网络应用的日新月异,互联网每日都在诞生新的应用技术,那么来执行网络流量分析的设备也需要及时的更新其识别代码,才能检测出新的流量.<?xml:namespace prefix = o ns = & ...
$sanitize和$sce服务的使用方法
var app =angular.module('myApp',['ngSanitize']); app.controller('ctrl',function($scope,$sce){$scope. ...
读《Android 安全架构深究》
Android 安全架构深究安全是一个非常立体而丰富得概念.在不同的场景下,安全有着不同的含义. 比如对于网络传输,安全指的是传输的数据不会被其他人看到.篡改.伪造及仿冒,传输的数据不会遭到破坏,数 ...

深究AngularJS——$sce的使用

1.trustAsResourceUrl

2.trustAsHtml

深究AngularJS——$sce的使用相关推荐

最新文章

热门文章