javascript - Angular JS在视频ID上使用$ http.get，并使用ng-repeat与/embed连接

Question

我在https://www.googleapis.com/youtube/v3/search?part=snippet&q=test&key='MY_API_KEY'上使用$ http.get获取YouTube视频列表。

该链接具有我要串联的视频ID，如下所示:“https://youtube.com/embed/ {{videoID}}”，但是为了获取videoID，我必须使用

<div ng-repeat="video in videoList"
    <iframe id="ytplayer" type="text/html" width="640" height="360" ng-src="https://www.youtube.com/embed/{{video.id.videoId}}" frameborder="0" allowfullscreen></iframe>
</div>

但是Angular不允许插值连接多个表达式。控制台错误是

Error: [$interpolate:noconcat] Error while interpolating: https://www.youtube.com/embed/{{video.id.videoId}}
Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required.

我已阅读$ sce文档，并尝试将 https://www.youtube.com/列入白名单**

这是一个显示我相关代码的jsfiddle: http://jsfiddle.net/xzdk3/
由于api键要求我允许IP地址访问它，因此显示的结果不太可能显示。

我现在不确定该怎么办。我可以创建一个新数组来包含完整链接(www.youtube.com/embed/{videolinkhere})和ng-repeat来完成此操作，但是必须有另一种方法。我尝试过考虑将video.id.videoID重命名为单个表达式的方法，以便angular可以对其进行插值，但是我不知道如何使用ng-repeat的语法

 ng-repeat="video in videoList"

我不能只是做

 ng-repeat="video.id.videoId in videoList"

任何帮助表示赞赏。

Answer 1

您可以使用ng-init首先创建变量，然后在ng-src中使用它

<div ng-repeat="video in videoList" ng-init="theVideoId=video.id.videoId">
    <iframe id="ytplayer" type="text/html" width="640" height="360" ng-src="https://www.youtube.com/embed/{{theVideoId}}" frameborder="0" allowfullscreen></iframe>
</div>