AngularJS - issue when embedding Youtube video with directive

Question

So I basically copied and pasted the code from this

http://plnkr.co/edit/0N728e9SAtXg3uBvuXKF?p=preview

To embed a youtube video.

It all works well, but now I'm trying to embed a youtube video where the "youtube video ID" is retrieved via service.

So in my controller, I do something like

  APIService.getVideo($stateParams.videoId).then(function(video) {
    $scope.code = video.youtube_video_id;
  });

And in my template, I have

<div my-youtube code="code"></div>

But this is not working.

Basically, in the directive,

app.directive('myYoutube', function($sce) {
  return {
    restrict: 'EA',
    scope: { code:'=' },
    replace: true,
    template: '<div style="height:400px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
    link: function (scope) {
      scope.$watch('code', function (newVal) {
        if (newVal) {
          scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
        }
      });
    }
  };
});

where there is src="{{url}}" I get "localhost/myapp/{{url}}" does not exist.

How do I get around this?

hassassin · Accepted Answer · 2014-02-05 00:21:46Z

1

I've updated the plnkr you linked to include getting the code from a service. http://plnkr.co/edit/BggETGi7zAWL5bdHd0hO?p=preview

Here is my service, which basically mocks a server call for a code

app.factory('myFactory', function($q) {
  return {
    getCode: function() {
      var def = $q.defer();
      setTimeout(function() {
        def.resolve('oHg5SJYRHA0');
      }, 2000);
      return def.promise;
    }
  }
});

Hope this helps! Otherwise it would be helpful to get a broken plnkr to work off of

answered Feb 5, 2014 at 0:21

hassassin

5,0641 gold badge32 silver badges39 bronze badges

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

2 Comments

ericbae Over a year ago

hm, so what's actually going on here? I have to delay the returning of the data so that it loads properly? seems a very 'hacky'...... no?

hassassin Over a year ago

the timeout is just there to simulate a server call.

Collectives™ on Stack Overflow

AngularJS - issue when embedding Youtube video with directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related