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 — musically_ut
– musically_ut, Commented Jan 28, 2015 at 14:01

augustoccesar · Accepted Answer · 2015-01-28 14:03:57Z

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, 2015 at 14:03

augustoccesar

6669 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jim Peeters Over a year ago

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={{"youtube.com/embed" + selectedSong.youtube_ids.default + "?rel=0?rel=0&hd=1" | trustThisUrl}}"

augustoccesar Over a year ago

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.

Jim Peeters Over a year ago

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?

augustoccesar Over a year ago

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&amp;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}}

Jim Peeters Over a year ago

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 : plnkr.co/edit/SJHNbzhQXIpYxifWBKuh?p=preview

|

Community · Accepted Answer · 2017-05-23 12:05:42Z

1

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

Alternative to iFrames with HTML5

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Jan 28, 2015 at 15:59

Jim Peeters

2,91310 gold badges35 silver badges55 bronze badges

Comments

Tarik · Accepted Answer · 2015-02-15 05:03:28Z

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, 2015 at 5:03

Tarik

5,0313 gold badges40 silver badges67 bronze badges

answered Feb 15, 2015 at 4:08

Richard Gas

1

Collectives™ on Stack Overflow

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

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related