14

html5 オーディオ タグで angular 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"));

しかし、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 に答える
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 に答える
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 に答える