14

我正在尝试将角度 ngRepeat 与 html5 音频标签一起使用。我有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"));

但是 Angular 的同源检查导致插值错误：

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

这似乎很愚蠢。它不是插入本地资源。我想有一种方法可以正确地做到这一点 - 或者我应该提交错误报告吗？

4

5 回答 5

20

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

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

您也可以在此处查看文档。

于 2014-01-13T09:05:41.250 回答
4

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

$sce.trustAsResourceUrl

在此处查看带有更详细说明的 SO 问题

于 2014-02-04T14:07:04.143 回答
1

我的 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):/);
}]);
于 2013-11-20T14:14:42.007 回答
0

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

InitRecording = function() {
    var reader = new FileReader();
    reader.onload = function() {
        audioSRC = $sce.trustAsResourceUrl(reader.result);
        $scope.$apply();
    };
    reader.readAsDataURL(recordedBlob);
}
于 2016-10-24T14:59:39.023 回答
0

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

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>

于 2016-01-19T11:04:32.593 回答