私は脱出する必要があります！

Question

私はAngularと$sceをプロジェクトに使ってHTMLの特殊文字を表示し、ビデオプレーヤーのデータベース内のビデオファイルへのリンクを作成しています。しかし、私は$sceを入手して、HTMLオーディオプレーヤーを同じデータベースのオーディオファイルに接続することはできません。

このHTML作品：

<audio controls ng-src="https://mydatabase.com/aa6df923"> 

これは、プロジェクトのHTMLです：

<audio controls ng-src="{{audioSource}}"> 

これは動作しません：

$scope.audioSource = "https://mydatabase.com/aa6df923"; 

また、これは動作しません。

app.controller('MyController', function($scope, $sce) { 
    $scope.audioSource = $sce.trustAsResourceUrl("https://mydatabase.com/aa6df923"); 
}); 

これは動作しないかん：

app.controller('MyController', function($scope, $sce) { 
    $scope.audioSource = $sce.trustAsResourceUrl("https://mydatabase.com/aa6df923"); 
    $scope.$apply(); 
}); 

ない、この1次のいずれか

$scope.audioSource = "../audio/myFile.mp3"; 

そして、最後に、このフィルタは、HTMLの特殊文字をエスケープするために動作しますが、オーディオをリンクするために動作しませんがファイル：

<audio controls ng-src="{{audioSource | trustAsHtml}}"> 

app.filter('trustAsHtml', [$sce', function($sce) { 
    return function(html) { 
     return $sce.trustAsHtml(html); 
    }; 
}]); 

何が欠けていますか？

Answer 1

trustAsHtmlの例と同じように動作するtrustAsResourceUrlという新しいフィルタを作成できます。

trustAsResourceUrlフィルタの作成：あなたの例にタイプミスがあることが

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

ノート - (

return間と function

をあなたのテンプレートにフィルタを使用します。

<audio controls ng-src="{{ audioSource | trustAsResourceUrl }}"> 

これはあなたがフィルターに渡すすべての URLを信頼する心に留めておいてください。

ドメインをホワイトリストに登録する場合は、app.config()でこれを行うことができます。

angular.module('app') 
.config(['$sceDelegateProvider', function($sceDelegateProvider) { 
    // whitelist resource URLs 
    $sceDelegateProvider.resourceUrlWhitelist([ 
    'self', 
    'https://mydatabase.com/**' 
    ]); 
}]); 

そうでなければ、あなたの以前の例のコードは、これらのソリューションは、あなたの問題を解決しない場合は、あなたがコンソールに見ている完全なエラーを投稿する参考になるなど、ドメインの試合を想定し、動作するはずです。

Answer 2

私はそれを理解し始めました。 $scope.audioSourceは関数内にあり、新しい$scopeになります。私。、{{audioSource}}および$scope.audioSourceは異なるスコープにあります。関数の値をコントローラの$scopeに戻すように作業します。