AngularJS多前pressions插值串联一个网址 [英] AngularJS multiple expressions concatenating in interpolation with a URL

问题描述

我知道这是很长，但是请多多包涵。这个问题很容易理解，只是需要一些书面完全解释它。

I know this is long, but please bear with me. The problem is easy to understand, just takes some writing to fully explain it.

现在，我得到这个错误

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

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

I've done all the reading in the documentation, but I still can't find a workaround for my problem.

我使用$ http.get上有数据类似于一个JSON文件的形式的私人在线资源（所以我不能修改数据）。数据是这样的：

I'm using $http.get on a private online source that has data that is similar to the form of a json file (so I can't modify the data). The data looks like this:

...
"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插值到我的HTML的iframe嵌入YouTube的视频。在我controller.js文件，我设置$ http.get这样

I'm trying to interpolate the videoId of each item into my HTML iframe that embeds the YouTube video. In my controller.js file, I'm setting the promise object after the $http.get as such

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

所以，现在的变量$ scope.videoList被映射到data.items，其中有大量的视频元素。在我的HTML文件，我可以通过检索每个视频的VIDEOID

So now the variable "$scope.videoList" is mapped to data.items, which has a lot of video elements. In my HTML file, I can retrieve the videoID of each video by using

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

有没有办法，我能得到被插值到YouTube网址的VIDEOID？我已经使用$ sceDelegateProvider如下尝试白名单，但它仍然无法正常工作

Is there a way that I can get the videoID to be interpolated into the youtube URL? I've tried whitelisting by using the $sceDelegateProvider as follows but it still does not work

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

任何帮助是AP preciated。谢谢！

Any help is appreciated. Thanks!

推荐答案

由于1.2只能绑定一名当然pression为* [来源] * [NG-SRC]或动作。你可以阅读更多关于它的<一个href=\"https://docs.angularjs.org/guide/migration#you-can-only-bind-one-ex$p$pssion-to-src-ng-src-or-action-\">here.

Since 1.2 you can only bind one expression to *[src], *[ng-src] or action. You can read more about it here.

试试这个：

在控制器：

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

HTML

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

请注意，您仍然需要它加入白名单，你有，否则你将获得从网址锁定加载资源不被$ sceDelegate政策允许。

Note that you still need to whitelist it as you have, or you will get locked loading resource from url not allowed by $sceDelegate policy.

这篇关于AngularJS多前pressions插值串联一个网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！