Embed YouTube videos using ng-repeat in Angular

问题

I am using ng-repeat directive in Angular to embed some videos fetched from server.

I get video IDs from server and I have following code:

<div ng-repeat="media in product.media">
    <div class="thumbnail">
        <div class="video-container">
            <iframe width="100%" src="//www.youtube.com/embed/{{ media.src }}" frameborder="0 " allowfullscreen></iframe>
        </div>
    </div>
</div>

When I see the output, the video is not showing up. And when I inspect element in Google chrome, the html doesnt seem to change:

Any thoughts?

回答1:

Since 1.2 you can only bind one expression to *[src], *[ng-src] or action. You can read more about it here.

Use ng-src and change your HTML to:

ng-src="{{getIframeSrc(media.src)}}"

In the controller add:

$scope.getIframeSrc = function(src) {
  return 'https://www.youtube.com/embed/' + src;
};

Note that you need to specify the protocol.

You also need to add the URL as trusted by configuring the $sceDelegate service:

app.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://www.youtube.com/**'
  ]);
});

Demo: http://plnkr.co/edit/4U5HxNnVDwlF5udRiQa1?p=preview

来源：https://stackoverflow.com/questions/23757015/embed-youtube-videos-using-ng-repeat-in-angular