深究AngularJS中$sce的使用

更新時間：2017年06月12日 16:30:53 作者：zcl_love_wx

本篇文章主要介紹了深究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"http://視頻路徑
    };   
    $scope.sceControl = $sce.trustAsResourceUrl;//第一種處理方式

    //第二種方式數(shù)據(jù)源
    $scope.data={
      "name":"視頻",
      "url":"http://res.audiogroup.cn/res/upload/agx_ims_creative/audio/20160307/bpryk96.mp3"http://視頻路徑
    }; 
    $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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: