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

Question

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

现在我遇到这个错误

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

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

我在私有在线源上使用$ http.get，该私有源上的数据与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。但是，如果我尝试将这些值连接到URL，例如https://youtube.com/embed/，它将无法正常工作。

<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/**']);

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

Answer 1

从1.2开始，您只能将一个表达式绑定到 [src]， [ng-
src]或动作。您可以在此处了解更多信息。

尝试以下方法：

在控制器中：

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