user4901205 user4901205 - 6 months ago 76
AngularJS Question

Initializing fullpage.js multiple times in an angular app

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

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();

Update

A few angular directives are now available: