Initializing fullpage.js multiple times in an angular app

Question

I am building an Angular app that uses fullpage.js in a few of its pages. Currently, I am initializing fullpage (e.g. $('#this-routes-fullpage').fullpage({ options... }) ) using a custom directive within the template for each route where it is getting used. At the end of each of these custom directives, I'm calling

scope.$on('$routeChangeStart', function() {
    $.fn.fullpage.destroy('all');
}

This works as I expect (the plugin is destroyed and reinitialized the next time it is encountered) when I am navigating from one page that utilizes the plugin, to another page that doesn't utilize it, and then back on to a third page that does utilize it. However, if that intermediate step is left out and I navigate directly from one route that utilizes fullpage to a second that also utilizes it, the plugin doesn't initialize properly. By which I mean that the controls won't work.

This makes me think that there is a better place for me to call the destroy function that will take proper advantage of Angular events. Can anyone help me out with this?? Thanks!

Answer 1

Update:

Now you can make use of the official Angular component for fullPage.js.

---

Just destroy it whenever and wherever you initialize it. Just before the initialization, for example:

//destroying
if (typeof $.fn.fullpage.destroy == 'function') { 
    $.fn.fullpage.destroy('all');
}

//initializing 
$('#fullpage').fullpage();

Or you can just check if it was initialized before checking the class/flag that fullPage.js adds to your html element (supposing this doesn't get modified in your ajax calls).

//destroying
if($('html').hasClass('fp-enabled')){
    $.fn.fullpage.destroy('all');
}

//initializing 
 $('#fullpage').fullpage();