How to dynamically test if YouTube iframe API loads without onYouTubeIframeAPIready

I have a directive in AngularJS that plays (etc.) a YouTube video via the YouTube IframeAPI.

In the body of the directive, I will check if the IframeAPI is ready for

var playerReady = $q.defer();
window.onYouTubeIframeAPIReady = function() {
  console.log('YouTube API is ready.')
  playerReady.resolve();
}

      

This is done only once.

Then I have

return {restrict: 'E',
   link: function(scope, element, attrs) {

      

and so on, where I am looking at the scope variable, but that is not important here.

Then when my youtube element is done I can in the link init function if with playerReady.promise.then (...

)

It's inside the callback scope.$watch

.

This works well if my element is youtube

present in the first route, although if the video is only later set (I have ng-show=..."

to hide it until a certain event is triggered in the scope, and the linker function is watching this object in the scope), but if it goes to it later (i.e. the first route doesn't have my youtube element), I can't resolve playerReady anymore.

To summarize, how can I dynamically test later, what if the youtube iframe api is ready and therefore resolve mine playerReady

? I could do this in my supervisor.

This in the directive body solves the problem

setTimeout(function(){
  playerReady.resolve();
},3000);

      

but that's not how it should be done.

+3


source to share





All Articles