☰

AngularJS 複数の式を URL で連結して補間する 質問する

tag-icon • tag-icon javascript angularjs youtube concatenation interpolation
AngularJS 複数の式を URL で連結して補間する 質問する

長くなりましたが、どうかお付き合いください。問題は簡単に理解できますが、完全に説明するには少し文章を書く必要があります。

今このエラーが発生しています

Error: [$interpolate:noconcat] Error while interpolating: 
Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required.  
See http://docs.angularjs.org/api/ng.$sce

ドキュメントをすべて読みましたが、問題の回避策がまだ見つかりません。

私は、json ファイルの形式に似たデータを持つプライベート オンライン ソースで $http.get を使用しています (そのため、データを変更することはできません)。データは次のようになります。

...
"items": [
  {
   "kind": "youtube#searchResult",
   "etag": "\"N5Eg36Gl054SUNiWWc-Su3t5O-k/A7os41NAa_66TUu-1I-VxH70Rp0\"",
   "id": {
      "kind": "youtube#video",
      "videoID": "MEoSax3BEms"
      },
   },
   {
    "kind": "youtube#searchResult",
    "etag": "\"N5Eg36Gl054SUNiWWc-Su3t5O-k/VsH9AmnQecyYBLJrl1g3dhewrQo\"",
    "id": {
       "kind": "youtube#video",
       "videoID": "oUBqFlRjVXU"
       },
    },
...

YouTube動画を埋め込むHTML iframeに各アイテムのvideoIdを挿入しようとしています。controller.jsファイルでは、$http.getの後にpromiseオブジェクトを次のように設定しています。

$http.get('privatesource').success(function(data) {
  $scope.videoList = data.items;
});

これで変数「$scope.videoList」が、多くのビデオ要素を持つdata.itemsにマッピングされました。私のHTMLファイルでは、次のように各ビデオのvideoIDを取得できます。

<ul class="videos">
  <li ng-repeat="video in videoList">
    <span>{{video.id.videoID}}</span>
  </li>
</ul>

これはすべてのビデオIDをリストします。しかし、これらの値をURLに連結しようとすると、https://youtube.com/embed/、 それは動作しません。

<div ng-repeat="video in videoList">
    <iframe id="ytplayer" type="text/html" width="640" height="360" 
     ng-src="https://www.youtube.com/embed/{{video.id.videoId}}" 
     frameborder="0" allowfullscreen></iframe>
</div>

動画IDをYouTubeのURLに挿入する方法はありますか？次のように$sceDelegateProviderを使用してホワイトリスト化を試みましたが、まだ機能しません

$sceDelegateProvider.resourceUrlWhitelist([
  'self',
  'https://www.youtube.com/**']);

どのような助けでも大歓迎です。ありがとうございます!

ベストアンサー1

@tasseKATT の回答 (コントローラー関数を必要としない) の代替案は、 フィルターの 式で直接文字列連結を 使用することです。 

angular.module('myApp')
  .filter('youtubeEmbedUrl', function ($sce) {
    return function(videoId) {
      return $sce.trustAsResourceUrl('http://www.youtube.com/embed/' + videoId);
    };
  });

<div ng-src="{{ video.id.videoId | youtubeEmbedUrl }}"></div>

xlink:hrefこれは、 SVG タグの属性を使用する必要がある SVG アイコン スプライトを使用するときに特に便利であることがわかりました。useこれは、同じ SCE ルールの対象です。スプライトを使用する必要があるすべての場所でコントローラー関数を繰り返すのは無意味に思えたので、代わりにフィルター メソッドを使用しました。

angular.module('myApp')
  .filter('svgIconCardHref', function ($sce) {
    return function(iconCardId) {
      return $sce.trustAsResourceUrl('#s-icon-card-' + iconCardId);
    };
  });

<svg><use xlink:href="{{ type.key | svgIconCardHref }}"></use></svg>

注: 以前は、式内で単純な文字列連結を試していました。しかし、これにより、Angular が式を解析して実際のものに置き換える前に、ブラウザーが式を解釈するという予期しない動作が発生しました。タグに相当するものhrefがないため、フィルターを選択しましたが、これで問題は解決したようです。ng-srcusexlink:href

おすすめ記事