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

【问题标题】：Embed YouTube videos using ng-repeat in Angular在 Angular 中使用 ng-repeat 嵌入 YouTube 视频
【发布时间】：2014-05-20 10:16:12
【问题描述】：

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

当我看到输出时，视频没有显示。当我在谷歌浏览器中检查元素时， html 似乎没有改变：

有什么想法吗？

【问题讨论】：

你能发个小提琴吗？这似乎是一个错误的 src 属性......我应该看到 media.src 的值而不是 html 中的“media.src”字符串
@faby jsfiddle.net/e7LWu/1

标签： javascript angularjs youtube

【解决方案1】：

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

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

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

在控制器中添加：

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

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

您还需要通过配置$sceDelegate 服务将 URL 添加为可信：

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

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

【讨论】：