在Angular中使用ng-repeat嵌入YouTube视频

Question

我在Angular中使用ng-repeat指令来嵌入从服务器获取的一些视频。

我从服务器获取视频ID，我有以下代码：

<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>

当我看到输出时，视频没有显示出来。当我在Google Chrome中检查元素时， HTML似乎没有改变：

有什么想法吗？

Answer 1

从1.2开始，你只能将一个表达式绑定到* [src]，* [ng-src]或action。您可以阅读更多相关信息here。

使用ng-src并将您的HTML更改为：

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

在控制器中添加：

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

请注意，您需要指定协议。

您还需要通过配置$sceDelegate服务

来将URL添加为受信任的URL

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

演示： http://plnkr.co/edit/4U5HxNnVDwlF5udRiQa1?p=preview