0

I'm using $http.get on https://www.googleapis.com/youtube/v3/search?part=snippet&q=test&key='MY_API_KEY' to get a list a videos from YouTube.

The link has the video ID that I want to concatenate as follows: "https://youtube.com/embed/{{videoID}}" but in order to get the videoID, I have to use 

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

But Angular does not allow interpolations that concatenate multiple expressions. The console error is 

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.

I've read the $sce documentation and I've tried whitelisting https://www.youtube.com/**

Here is a jsfiddle to show my relevant code: http://jsfiddle.net/xzdk3/ The display result doesn't show most likely because the api key requires me to allow IP addresses to access it.

I'm not sure what to do at this point. I could make a function to create new array to contain the full links (www.youtube.com/embed/{videolinkhere}) and ng-repeat through that, but there must be another way. I tried thinking of a way to rename video.id.videoID to a single expression so that angular can interpolate it, but I don't know how to do that using ng-repeat's syntax of 

 ng-repeat="video in videoList"

I can't just do 

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

Any help is appreciated.

user2669464
  • 969
  • 3
  • 12
  • 17
  • Your fiddle example isn't working. Please fix. – J_A_X May 01 '14 at 07:11
  • I'm using Google's server key for public API access which requires that I add individual IP addresses so that they can access YouTube data. Since I have not added your IP address to my list of allowed IPs, you can't see the data from the $http.get target – user2669464 May 01 '14 at 08:45
  • I understand, but either make up dummy data to use for the example to work (copy pasted real data perhaps?) or open up the restriction to allow everyone. – J_A_X May 01 '14 at 13:01
  • My question was answered here: http://stackoverflow.com/questions/23405162/angularjs-multiple-expressions-concatenating-in-interpolation-with-a-url/23406678?iemail=1&noredirect=1#23406678 – user2669464 May 01 '14 at 21:02

1 Answers1

0

You can use ng-init to first create the variable and then use that in 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>
JoseM
  • 4,302
  • 2
  • 24
  • 35