Tommy Sollén Tommy Sollén - 25 days ago 13
AngularJS Question

What's wrong with my {{url}}?

In angular.js and ionic framework, I'm trying to list a number of youtube films and I'm trying to input the src from an array.

Here's the data in services.js

var friends = [
{ id: 0, name: 'Omvända ZombieGrodor', url: '//www.youtube.com/embed/PHlIcWOwzQI?list=UUelsYLaipZjghHb8Wu_xm1g' },
{ id: 1, name: 'Höftlyft', url: '//www.youtube.com/embed/3o39iMaxVk4?list=UUelsYLaipZjghHb8Wu_xm1g' },
{ id: 2, name: 'Löparen', url: '//www.youtube.com/embed/21cLUxul11A?list=UUelsYLaipZjghHb8Wu_xm1g' },


];

And here's the html:

<div class="list card">
<div class="item item-image item-text-wrap">
<iframe width="385" height="217" src="{{friend.url}}" frameborder="0" allowfullscreen></iframe>
Friend.url: {{friend.url}}
</div>
</div>


If I hard code an URL in the src field it works. But it won't work with this {{friend.url}} why is that?
Also, if I print out {{friend.url}} (as shown in the code example) it shows up fine!.

Appreciate your help.

Update:
I've changed the src to ng-src but it still doesn't work.

<iframe width="385" height="217" ng-src="{{friend.url}}" frameborder="0" allowfullscreen></iframe>

Answer

Thank you @noahmonster to pointing me to this thread AngularJS ng-src inside of iframe which had the solution to my problem.

Here's the solution:

<iframe width="385" height="217" src="{{friend.url | trustAsResourceUrl}}" frameborder="0" allowfullscreen></iframe>

(note the filter!)

I then added this code into app.js:

.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
    return $sce.trustAsResourceUrl(val);
};

}])

Now it works like a charm :)

Comments