Wisita onReady event firing multiple times in Angular controller

Question

Looking for some help on how to prevent onReady from firing multiple times in an Angular/Ionic app when used in conjunction with $window. Specifically, we're using this method for Wistia videos (as instructed here). The offending code is:

$window._wq = $window._wq || [];
$window._wq.push({ id: "5bbw8l7kl5", onReady: function(video) {
    console.log("I got a handle to the video using Wistia's onReady method!", video.uuid);
}});

What is it about using $window._wq that ends up executing the onReady method multiple times?

How can we make this code Angular friendly (without "hacking" or forcing a work-around) so that onReady only fires once when revisiting the controller view each time?

I put up some sample code that can be used to reproduce the issue locally here, if you so choose.

Any insights, thoughts, ideas would be greatly appreciated!!

Answer 1

These are possible options which causes issues
1.I think you have multiple videos with same id.
2. On api page he used _wq.push instead of $window._wq.push
3. You are using angular, did you checked you have two videos with same ng-models or ng-click events

Answer 2

You might have multiples of these anonymous function callbacks floating around. I suggest extracting the onReady callback into a separate function and passing the function to onReady in the object.

$window._wq = $window._wq || [];
$window._wq.push({ id: "5bbw8l7kl5", onReady: onReadyCallback });
var onReadyCallback = (video) => { console.log('I got a handle to the video using Wistia's onReady method!', video.uuid };

This will help you at least isolate the code out of the anonymous function and isolate the callers of the function, which will help you track down the root cause of the multiple events firing. You might also have multiple instances of the controller in scope, but I don't have any Wistia or Ionic experience.