###Run
node sample/web-server.js localhost:8000/index.html/#wizard
- angularjs
- twitter bootstrap (css only)
###See sample folder
var app = angular.module('app', ['widgets']);
- Directive wizard - main directive (have n wizard-group)
- Directive wizard-group - content directive
<wizard config="wizard" on-validation-step="vm.validationStep" on-completed-wizard="vm.completeWizard" next="next" previous="previous" end="Finish">
<wizard-group title="Account Data" active="true">
...
</wizard-group>
<wizard-group title="Profile">
...
</wizard-group>
</wizard>- on-validation-step - fired when change step
- on-completed-wizard - fired when finish button is clicked
###Controller
vm.validationStep = function(item, actions) {
if(vm.user.email.length<=0)
actions.error(['email is required']);
else
actions.success();
}
vm.completeWizard = function(scope, actions) {
console.log('completed');
}
- item object - contains step info
{name: "Account Data", index: 0, active: "active"}- action object - contains callback functions
{success: function, error: function}- Install dependencies
bower install- Build directive
grunt build- Build sample
grunt sample