angular 中的 $sce 服务

AngularJS里好些地方,比如路径默认是个字符串,不会认为是路径,从而访问不到我们需要的东西,那么我们就可以通过$sce告诉angualrJS这个路径,这样是很安全滴。


$sce 的使用有如下方法

$sce.trustAs(type,name);  // 

$sce.trustAsUrl(value);

$sce.trustAsHtml(value);

$sce.trustAsResourceUrl(value);

$sce.trustAsJs(value);

第一种方式:

有$sce处理:  <audio  ng-src="{{sceControl(formData.mediaUrl)}}"  controls="controls">

您的浏览器不支持html5 </audio>

无$sce处理:<audio  ng-src="{{formData.mediaUrl}}"  controls="controls">您的浏览器不支持html5</audio>

您的浏览器不支持html5

第二种方式:

<audio  ng-src="{{data.url}}"  controls="controls">您的浏览器不支持html5</audio>

<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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容