ng-src attribute in an iframe doesn't accept expressions ? using Angular.js

Question

I am trying to display the youtube video of a specific ID that i can take out of my array. I use an expression to fill in this ID at the right place in my ng-src attribute , but it doesn't work. I used the same expression above the i-frame to see if the expression is working , and it did.

<iframe allowfullscreen="" 
        frameborder="0" 
        height="315" 
        ng-src="http://www.youtube.com/embed/{{selectedSong.youtube_ids.default}}?rel=0?rel=0&amp;hd=1" 
        width="560">
</iframe>

As you see i used the {{selectedSong.youtube_ids.default}} expression for my id but when I inspect my html when running it is displaying the expression instead of the result (so I'm sure it isn't working).

possible duplicate of [Angular JS: How to set an iframe src attribute from a variable](http://stackoverflow.com/questions/20045150/angular-js-how-to-set-an-iframe-src-attribute-from-a-variable) — musically_ut, Jan 28 '15 at 14:01
http://stackoverflow.com/questions/13881834/bind-angular-cross-iframes-possible — Nicholas Hirras, Jan 28 '15 at 14:01

score 3 · Accepted Answer · answered Jan 28 '15 at 14:03

3

As far as I know, this don't work because of security matters to previne xss attacks. But you can create a filter to trust the url like:

angular.module('filters', []).filter('trustThisUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}]);

And then call it as filter of the url in src

<iframe ng-src="{{ anUrlFromYourController | trustThisUrl}}"></iframe>

answered Jan 28 '15 at 14:03

augustoccesar

658
9
30

I have added this filter , but now i'm trying to figure out how i have to declare the 'anUrlFromYourController' in my expression i have tried something like this ng-src={{"http://www.youtube.com/embed/" + selectedSong.youtube_ids.default + "?rel=0?rel=0&hd=1" | trustThisUrl}}" – Jim Peeters Jan 28 '15 at 14:23
You should try to build the full URL in your controller to avoid that concat in the `ng-src`. I don't know if it is a bad practice, but if you build the URL in the controller, your code gets cleaner, more readable and you can get the filter to work properly because it evaluate an variable value. – augustoccesar Jan 28 '15 at 14:28
I am so sorry to bug you with this but I'm a beginner in angular.js and javascript , can u maybe explain me how i build this URL in my controller? – Jim Peeters Jan 28 '15 at 14:40
You're no bugging me at all. Well, considering that your `iframe` is inside an `ng-repeat`, the `selectedSong` is an element of an array, right? So, you can iterate that array on your controller before you pass it to the page. Something like: `for(var i in songs){ songs[i].fullUrl = "http://www.youtube.com/embed/"+song[i].youtube_ids.default+"?rel=0?rel=0&hd=1 "} ` and then put the `songs` array into an `$scope` variable to use in the `ng-repeat`. After that just call the `fullUrl` as an attribute, like: `ng-src={{selectedSong.fullUrl | trustThisUrl}}` – augustoccesar Jan 28 '15 at 14:48
I'm still confused of using the $scope variable and such , as i said i am a very big noob and this javascript looks very advanced , can i maybe ask a bit of your time to look at my application on Plunkr ? this is the link : http://plnkr.co/edit/SJHNbzhQXIpYxifWBKuh?p=preview – Jim Peeters Jan 28 '15 at 15:15
I'm looking at it, but I can't find your ``. But what I was saying is like. Where you are doing `$songs.tracks = jsonObject.played_tracks;`, I was suggesting that you could add to the `$songs.tracks` the attribute `fullUrl`, like: `var tracks = jsonObject.played_tracks; for(var i in tracks){ tracks[i].fullUrl = "http://www.youtube.com/embed/+tracks[i].youtube_ids.default+?rel=0?rel=0&hd=1" } $songs.tracks = tracks` – augustoccesar Jan 28 '15 at 16:30

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

I have found a better solution for this where the bug is resolved:

Alternative to iFrames with HTML5

edited May 23 '17 at 12:05

Community

1
1

answered Jan 28 '15 at 15:59

Jim Peeters

2,573
9
31
53

score 0 · Answer 3 · edited Feb 15 '15 at 05:03

0

in your controller : insert in parameter : $sce

function($sce, ...)

$scope.linkYoutube = $sce.trustAsResourceUrl('http://www.youtube.com/embed/'+data['yourLink']);

Then in the html, you can use `ng-src="linkYoutube"

edited Feb 15 '15 at 05:03

Tarik

4,961
3
36
67

answered Feb 15 '15 at 04:08

Richard Gas

1

ng-src attribute in an iframe doesn't accept expressions ? using Angular.js

3 Answers3