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

Question

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

我从服务器获取视频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.你可以在这里阅读更多相关信息.

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