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

Question

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>

Do you have your iframe in an ng-repeat? The friends variable is an array, so you'll need to iterate over it somehow. — Noah Solomon, Sep 10 '14 at 19:58
Yes, another template actually uses ng-repeat to create a list. Click on an item in this list leads into the code and problem I've written about above. The iteration is not the problem. It's the ng-src not working. Why? — Tommy Sollén, Sep 10 '14 at 20:07
Your friends array urls are missing an http: prefix. Could this be contributing? — Noah Solomon, Sep 10 '14 at 20:21
No I don't think so @noahmonster . First of all, that's the format of an url from a youtube embed code. Secondly, if I try to put in the http before the {{}} I get a clear error message like this: `Cannot GET /http%7B%7Bfriend.url%7D%7D` So clearly, the browser is trying to load an URL with the {{}} in the link instead of interpreting the {{}} :( — Tommy Sollén, Sep 10 '14 at 20:24
It might have something to do with $sce. Check out this issue: http://stackoverflow.com/questions/24163152/angularjs-ng-src-inside-of-iframe — Noah Solomon, Sep 10 '14 at 20:31

score 6 · Accepted Answer · edited May 23 '17 at 10:32

6

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

edited May 23 '17 at 10:32

Community

1
1

answered Sep 10 '14 at 20:45

Tommy Sollén

251
2
4
12

Can someone ACCEPT my answer? (I can't until two days from now) – Tommy Sollén Sep 10 '14 at 20:47
1

I think only the question asker can accept an answer? Anyhow, +1 for posting the solution in detail. – Steve Lang Sep 10 '14 at 21:28
You bet! I love it so much when people take the time and energy to help out so I do what I can to give back :) – Tommy Sollén Sep 10 '14 at 21:33

score 0 · Answer 2 · answered Sep 10 '14 at 20:41

Please see here http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview

angular.js is not going to interpolate your friend.url as treat them as unsave. You can use $sce service like in my example

add that script to you home page

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-sanitize.min.js"><script>

JS:

var app = angular.module('plunker', ["ngSanitize"]);

    app.controller('MainCtrl', function($scope,$sce) {
      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' },
    ];
    $scope.friends = [];

    angular.forEach(friends, function(friend){

      friend.url =  $sce.trustAsResourceUrl(friend.url);
      $scope.friends.push(friend);

    })

    });

Thanks @sss I just found the solution so I haven't checked your suggestion in detail. — Tommy Sollén, Sep 10 '14 at 20:47

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

2 Answers2