Create Wizard flow using angularjs without routing

It often is the case that we want to toggle between views based on the choice the user has made. Also, if the user switches from one choice to other, we should be able to hide the current view and show the new based on the selection made. To ease the process of hiding and showing the panels based on the choice made by the user, I have created a directive to help us with the same. Its another way of implementing routing for small components.

Usage

Directive parameters:
scope-obj="isVisible"
where, isVisible is the object that will hold the attibute used for setting panels visibility.
on-action="'EVENT(s), ATTIBUTE(s), VALUE(s)'"
where,
  • first is the list of events
  • second is the list of attributes to be modified
  • third is the list of attribute values
eg. Setting only one attribute on-action=”‘KEYUP, attribute, value'” eg. Setting multiple attribute at the same time on-action=”‘CLICK, [days, select], [false, false]'” eg. Setting multiple events and attribute at the same on-action=”‘[CLICK, KEYUP], [days, select], [false, false]'” In this case, when any of the event is triggered, the attribute values are modified.

Live Demo

Here is a small live demo of the same:

Github repo

Github repo: https://github.com/jsbisht/onActionDirectiveAngular

Code

The following is the code for the angularjs directive: