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

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

有什么想法吗？

Answer 1

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

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

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

在 Controller 中添加:

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

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

您还需要通过配置 $sceDelegate 服务将 URL 添加为受信任的:

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

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