當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
深究AngularJS——$sce的使用
生活随笔
收集整理的這篇文章主要介紹了
深究AngularJS——$sce的使用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
為什么要要$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){//第一種方式數(shù)據(jù)源$scope.formData={"name":"視頻","mediaUrl":"http://res.audiogroup.cn/res/upload/agx_ims_creative/audio/20160307/bpryk96.mp3"//視頻路徑}; $scope.sceControl = $sce.trustAsResourceUrl;//第一種處理方式//第二種方式數(shù)據(jù)源$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){//未處理數(shù)據(jù)源$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> 《新程序員》：云原生和全面數(shù)字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的深究AngularJS——$sce的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深究AngularJS——校验（非for
- 下一篇： 深究AngularJS——排序