[SOLVED] What's wrong with my {{url}}?

ionic-v1
1

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="item item-image item-text-wrap">
      <iframe width="385" height="217" src="{{friend.url}}" frameborder="0" allowfullscreen></iframe>
      Friend.url: {{friend.url}}
  </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.

2

This may help

https://docs.angularjs.org/api/ng/directive/ngSrc

3

I wish it did @MrOnosa but no.
I changed the code to:

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

but there’s no change. Still doesn’t work.

4

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