Scrolligy is a simple to use and feature rich library for displaying dynamic scrolling steps or wizards.
- Dynamic Steps: you can add steps at run-time, at a specific position
- Step validation: each step can define a callback which will disable moving to other steps if validation fails
- Step Controller: each step can name it's own controller, either as a controller object or as a named controller from the current module
- Statefulness: the currently displayed step is reflected in the url
- Multiple scrolligys per page: the directive can be added multiple times per page, while providing a unique name to each
To use a scrolligy, add a <scrolligy>
element in the desired place in your
page. Configuring the scrolligy instance is done as followes:
###Defining scrolligy in your HTML
<scrolligy steps="steps" options="options" id="yo-man"></scrolligy>
####Details:
steps
- an array of steps on your scope. The structure of each step is explained later on.options
- an object with two fields:globalData
- any data that should be available in the scope of all of the stepsstateful
- a boolean value, iftrue
current step is reflected in the url, otherwise the url is left unchanged (defaults totrue
)
Each step in the steps
array should be an object with the following structure:
var step = {
templateUrl:
index:
isValid: // promise or boolean
invalid: // true of isValid is false
controller:
data:
}
####Details:
for you to contro the steps you muse use the Scrolligy serice.
Using get function will return your scrolligy by his id, if no id required the default scrolligy will return.
next() # next step
previous() # previous step
addStep(stepObject, index) # add new step. if no index, will add after current step
removeStep(index) # remove the step in the index
globalData # the global data the was given to the scorlligy
getCurrentStep() # returns the current step
goToStep(index) # go to index
When applying controller for step, setScrolligy function will be called.
setScrolligy(scrolligyName, stepData)