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.
where, isVisible is the object that will hold the attibute used for setting panels visibility.
on-action="'EVENT(s), ATTIBUTE(s), VALUE(s)'"
eg. Setting only one attribute
- first is the list of events
- second is the list of attributes to be modified
- third is the list of attribute values
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.
Here is a small live demo of the same:
Github repo: https://github.com/jsbisht/onActionDirectiveAngular
The following is the code for the angularjs directive: