javascript - AngularJS多个表达式通过URL插值连接

我知道这很长，但是请忍受我。这个问题很容易理解，只需花费一些文字就可以完全解释它。

现在我遇到这个错误

Error: [$interpolate:noconcat] Error while interpolating:
Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required.
See http://docs.angularjs.org/api/ng.$sce

我已经阅读了文档中的所有内容，但是仍然找不到解决我问题的方法。

我在私有(private)在线源上使用$ http.get，该私有(private)源上的数据类似于json文件的格式(因此我无法修改数据)。数据如下所示:

...
"items": [
  {
   "kind": "youtube#searchResult",
   "etag": "\"N5Eg36Gl054SUNiWWc-Su3t5O-k/A7os41NAa_66TUu-1I-VxH70Rp0\"",
   "id": {
      "kind": "youtube#video",
      "videoID": "MEoSax3BEms"
      },
   },
   {
    "kind": "youtube#searchResult",
    "etag": "\"N5Eg36Gl054SUNiWWc-Su3t5O-k/VsH9AmnQecyYBLJrl1g3dhewrQo\"",
    "id": {
       "kind": "youtube#video",
       "videoID": "oUBqFlRjVXU"
       },
    },
...

我正在尝试将每个项目的videoId插入嵌入YouTube视频的HTML iframe中。在我的controller.js文件中，我在$ http.get之后设置了promise对象。

$http.get('privatesource').success(function(data) {
  $scope.videoList = data.items;
});

因此，现在将变量“$ scope.videoList”映射到具有很多视频元素的data.items。在我的HTML文件中，我可以使用来检索每个视频的videoID

<ul class="videos">
  <li ng-repeat="video in videoList">
    <span>{{video.id.videoID}}</span>
  </li>
</ul>

并列出所有videoID。
但是，如果我尝试将这些值连接到https://youtube.com/embed/之类的URL，它将无法正常工作。

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

有没有一种方法可以将videoID插值到youtube URL中？我已经尝试通过使用$ sceDelegateProvider进行白名单操作，但是仍然无法正常工作

$sceDelegateProvider.resourceUrlWhitelist([
  'self',
  'https://www.youtube.com/**']);

任何帮助表示赞赏。谢谢!

最佳答案

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

尝试以下方法:

在 Controller 中:

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

HTML:

ng-src="{{getIframeSrc(video.id.videoId)}}"

请注意，您仍然需要将其列入白名单，否则您将获得locked loading resource from url not allowed by $sceDelegate policy。