Uncomplete Documentation

[benjamindamm]

You would be able to expect more donations if your documentation were better.

How to fire an event or call a function if the index of a section changes? From angular.config I can define a afterLoad function, which makes no sense here.

How the fullPageService can be used? The module is nearly unusable without a good documentation. I spend hours figuring out how everything works. Then I could just use the jQuery library instead.

Your Events are not getting fired properly. Only afterLoad is getting fired & afterRender.

[mmautomatizacion]

Hi @benjamindamm,
Sorry for the late reply.

You should consider this module like an adaptation of original FullPage.JS module for use it with AngularJS. I can't explain how Angular works, or how original FullPage.JS module works, cause you can find it in the original documentation.

With "fullPageConfig" provider, you can define all the same options of the original FullPage.JS module. You can check all options, explained one by one, in the original documentation. And in my documentation, you can see an example of how to use the provider. If you don't know how to use config provider, maybe you have to check the Angular documentation or find in google.

In another hand, you have the angular service "FullPageService". It's used for methods. You can check all the methods in the original FullPage.JS documentation. And in my documentation, you can see an example of how to use the service. Again, I can't explain you how Angular services works. You can check the Angular documentation or find in google.

For call a function when index change, you should use the config provider with "afterLoad" option. Here you have an example:

(function() {
	'use strict';

	angular
		.module('app')
		.config(function(fullPageConfigProvider) {

			fullPageConfigProvider.setConfig({
				afterLoad: function(anchorLink, index) {
					console.log('New index: ' + index);
				}
			});
	});

})();

I hope I've helped. If you need more help, more documentation or more example, please write me again.

[mmautomatizacion]

@benjamindamm I will check the events. Now I'm using it in my projects and have no problem.

[benjamindamm]

Thanks for your reply,

now I wrote an own event, but its called a lot of times (its a bit dirty now, but for my cases it works fine). My usecase is: I want to display a navigation only on several slides. But when I use the Events of your Code nothing happens, cause some events are not getting called.

[mmautomatizacion]

I think you are not using Angular correctly. Can you show me the code you are using?

[benjamindamm]

Beside your Events are not documented in your git. I had to figure them out of your code. This is the reason for my post.

`

angular.module('app', ['fullpage.js', 'ngResponsiveBreakpoints'])

.controller(
'AppController', ['$rootScope', '$scope', '$http', 'fullPageService', 'responsiveBreakpoints',
($rootScope, $scope, $http, fullPageService, responsiveBreakpoints) => {
//console.log($window)
$scope.screen = responsiveBreakpoints;
// Index init
$scope.view = {
index: 0,
name: null
}

$rootScope.$on('fp-afterLoad', (event, data) => {
    console.log('fp-afterLoad')
})

$rootScope.$on('fp-load', (event, data) => {
    console.log('fp-load')
})

$rootScope.$on('fp-afterLoad', (event, data) => {
    console.log('fp-afterLoad')
})

$rootScope.$on('fp-afterRender', (event, data) => {
    console.log('fp-afterRender')
})

$rootScope.$on('fp-onLeave', (event, data) => {
    console.log('fp-onLeave')
})



$rootScope.$on('fp-currentSection', (event, data) => {
    //console.log(data)
    $scope.view = {
        index: data.index,
        name: data.anchorLink
    }
})

$scope.slideDown = () => {
    fullPageService.moveSectionDown();
}

}])
.config(['fullPageConfigProvider', function(fullPageConfigProvider) {

fullPageConfigProvider.setConfig({
    scrollBar: true,
    sectionSelector: '.section',
    slideSelector: '.slide',
    // afterLoad: 
});

}]);
`

fp-currentSection is the event I wrote, it does the job I´ve searched for.

[mmautomatizacion]

If you see the original FullPage.JS, and the example I have post in my first reply, the events have to be defined like options. Like this:

fullPageConfigProvider.setConfig({
    scrollBar: true,
    sectionSelector: '.section',
    slideSelector: '.slide',
    afterLoad: function(anchorLink, index) {
        console.log(index);
    }
});

And another advise: the config provider must not be into a controller, cause will be executed on every use of controller. Use the "config" provider of Angular instead:

(function() {
	'use strict';

	angular
		.module('app')
		.config(function(fullPageConfigProvider) {

			fullPageConfigProvider.setConfig({
				afterLoad: function(anchorLink, index) {
					console.log('New index: ' + index);
				}
			});
	});

})();

[benjamindamm]

I do not know why you think my config would be in a controller. My Code is written in Typescript. And I wrote my config outside the controller as normal.
In my opinion when you are using angular events for your module, you have to write this down in your doc. Because its not part of the original jQuery module.

The Problem is still the same i scroll through my Slides and the only Events getting called are:

fp-load
fp-afterLoad
fp-afterRender

OnLeave and so on are not getting called like in the original jQuery-Module. I know it because i used both.

Call a function from .config is useless cause you have no scope to set a flag or emit an event. So my index information like console.log('New index: ' + index); is absolutely useless, cause I cant use it in my application. You can watch your changing index in console, thats not what I searched for.

[mmautomatizacion]

Sorry @benjamindamm. Sometimes is difficult to read the code without format.

The events inside config object is part of original jQuery FullPage module. You can check it here. The use of callbacks is "simulated" using, like you have discovered, the $rootScope events. I have not used it in any project, so this is the reason for not appear in documentation. I will add soon.

And I have the solution for your problem. This is not included in readme too. Sorry for this. The fullPageService have an object named "status". This object contain the information of actual section and slide. These parameters are "slideIndex", "slideAnchor", "anchorLink" and "sectionIndex". You can use the "fp-afterLoad" event and then for obtain the current status. Here an example:

$rootScope.$on('fp-afterLoad', (event, data) => {
	$scope.view = {
        	index: fullPageService.status.sectionIndex,
        	name: fullPageService.status.anchorLink
    	}
});

I will try to add all the information to readme. Surely someone will use it.

Thanks.

[mmautomatizacion]

Hi @benjamindamm,
I have updated the project to a new version of original jQuery FullPage.js module. I have updated the readme too for more information.

And I have to clarify that this project is not shared for do money, is shared for do it better. I'll never pay all the hours of work with donation. If my project is helping you, you can thank by working on improve it. I would love that. But if you prefer, you always can invite me to a coffee ;)