Question

我正在尝试使用带有html5音频标签的角度ngRepeat。我有html：

    <li ng-repeat="recordings in recordinglist">
        <audio controls ng-src="{{recordings}}"></audio>
   </li>

和js：

    $scope.$apply($scope.recordinglist.push("blob:http%3A//localhost%3A9000/67ecfa65-3394-45a6-8f29-42f3421a2727"));

但是，角度相同的原点检查会导致插值错误：

Error: [$interpolate:interr] Can't interpolate: {{recordings}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL: blob:http%3A//localhost%3A9000/67ecfa65-3394-45a6-8f29-42f3421a2727

这看起来很傻。它不是内插本地资源。我想有办法正确地做到这一点 - 或者我应该提交错误报告？

Answer 1

我之前尝试为webrtc视频显示blob src时遇到同样的问题，我使用 $ sce 服务修复了它：

angular.module('moduleName', ['ngSanitize'])
.controller('ctrName', ['$sce', function($sce) {
  $scope.recordings = $sce.trustAsResourceUrl(recordings);
}])

您也可以check the doc here。

Answer 2

对我来说，以下问题解决了这个问题：

$sce.trustAsResourceUrl

请参阅详细解释here

的问题

Answer 3

我的blob图像遇到了类似的问题...试试这个：

基本上它允许src中的任何blob图像

app.config( ['$compileProvider', function($compileProvider){   
  $compileProvider.imgSrcSanitizationWhitelist(/^\s*(blob):/);

  // another sample to allow diffrent kinds of url in <a>
  // $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto):/);
}]);

Answer 4

解决此问题的最佳方法是创建受信任的过滤器。

app.filter('trusted', ['$sce', function ($sce) {
return function(url) {
    return $sce.trustAsResourceUrl(url);
};}]);

并在ng-src中使用此过滤器。

<li ng-repeat="recordings in recordinglist">
    <audio controls ng-src="{{recordings |trusted}}"></audio></li>

Answer 5

从文件阅读器获取blob时，您可能必须添加$scope.$apply()来触发监视并相应地绑定。

InitRecording = function() {
    var reader = new FileReader();
    reader.onload = function() {
        audioSRC = $sce.trustAsResourceUrl(reader.result);
        $scope.$apply();
    };
    reader.readAsDataURL(recordedBlob);
}

Angular $ sce阻止我的音频blob src

5 个答案: