javascript - Angular $sce 阻塞了我的音频 blob src

Question

我正在尝试将 Angular 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

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

Answer 1

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

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

您也可以 check the doc here .