Fullpage JS, running on different pages

Question

I’m developing a project in Angularjs and I’m using Fullpage.js to scroll the pages. So far so good, the problem is the following:

As I have internal pages, I also need to use the scrolling of the script on these pages. But even creating the function as Scope so that it works on all pages or creating it with the different name and starting in each one Fullpage returns the following error:

fullPage: Fullpage.js can only be initialized Once and you are Doing it Multiple times!

Does anyone know how I can do so that when I start the other page function, I cancel the Fullpage function from the previous page and restart the other controller function?

Follow the function I’m using:

vm.rolagem_home = function(){

     $('#site').fullpage({
                //Navigation
                menu: '#menu',
                lockAnchors: false,
                //anchors:['firstPage', 'secondPage', 'trespage'],
                navigation: false,
                navigationPosition: 'right',
                //navigationTooltips: ['firstSlide', 'secondSlide'],
                showActiveTooltip: false,
                slidesNavigation: true,
                slidesNavPosition: 'bottom',

                //Scrolling
                css3: true,
                scrollingSpeed: 700,
                autoScrolling: true,
                fitToSection: true,
                fitToSectionDelay: 1000,
                scrollBar: false,
                easing: 'easeInOutCubic',
                easingcss3: 'ease',
                loopBottom: false,
                loopTop: false,
                loopHorizontal: true,
                continuousVertical: false,
                //normalScrollElements: '#element1, .element2',
                scrollOverflow: false,
                scrollOverflowOptions: null,
                touchSensitivity: 15,
                normalScrollElementTouchThreshold: 5,

                //Accessibility
                keyboardScrolling: true,
                animateAnchor: true,
                recordHistory: true,

                //Design
                controlArrows: true,
                verticalCentered: true,
              //  sectionsColor : ['#ccc', '#fff'],
              paddingTop: '0em',
              paddingBottom: '0px',
              fixedElements: '#header, .footer',
              responsiveWidth: 0,
              responsiveHeight: 0,

                //Custom selectors
                sectionSelector: '.section',
                slideSelector: '.slide',

                //events
                onLeave: function(index, nextIndex, direction){},
                afterLoad: function(anchorLink, index){},
                afterRender: function(){
                    $(window).load(function() {
                        $('#loading').hide();
                    });
                },
                afterResize: function(){},
                afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
                    console.log(slideIndex);
                    if(slideIndex > 0){
                        $('.fp-prev').show();
                    }else{
                        $('.fp-prev').hide();
                    }
                    if(slideIndex == 6){
                        $('.fp-next').hide();
                    }else{
                        $('.fp-next').show();
                    }
                },
                onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){

                }
            });

}

Answer 1

Dude, are you just going via Cope to another page or is this going on another controller? From what I saw, it allows only 1 load per page. I don’t know if it’s a load per controller.

Now the problem will occur if your other controller is a child controller of the first you have already started fullpage.js

There are some directives you can rely on:

• https://github.com/hellsan631/angular-fullpage.js
• https://github.com/mmautomatizacion/angular-fullpage.js

Hugs

Answer 2

You can use it as follows:

if($('#agencia').fullpage() != ''){ 
        $('#agencia').fullpage.destroy('all');   
    }

So the JS detects if it already exists running and Destroy.