Awesome
angular-autodisable
An extension to angular ng-click
directive that automatically sets the element to disabled if the handler would return a promise.
Requirements
Usage
Include ngAutodisable
as dependency
angular.module('MyApp', [ 'ngAutodisable', ... ]);
If that's done then just follow those simple steps:
- just attach
ng-autodisable
directive to the element which happens to haveng-click
directive OR a form that has theng-submit
directive. - ???
- profit!
On an element
<button ng-click="doSomething()" ng-autodisable>Do something</button>
<a ng-click="doSomething()" ng-autodisable>Do something</a>
On a form
<form ng-submit="doSomething()" ng-autodisable>
...
<button type="submit">Submit</button>
</form>
The button with type submit
within the form will be disabled.
Loading class
You can optionally add a list of classes which will be added to the element while this is disabled. This is useful to add a spinner or something similar.
<button ng-click="doSomething()"
ng-autodisable-class="class1 class2"
ng-autodisable>
Do something
</button>
<form ng-submit="doSomething()"
ng-autodisable-class="class1 class2"
ng-autodisable>
...
<button type="submit">Submit</button>
</form>
The button with type submit
within the form will get the class.
Demo
A quick demo is available at jsfiddle
How it works
When ngClick
and ngAutodisable
are on the same element then ngAutodisable
overwrites the handler for click
event. The default ngClick
action is recreated (and passes all the angular specs).
If the click handlers result happens to be a promise
($http
or $q
) then the element attribute disabled
will be set as true. If the promise fulfills then the element disabled
attribute will be removed.
This also works with multiple click handlers, given that click handlers are separated by ;
as such:
<button ng-click="doSomething();doSomethingElse()" ng-autodisable>Do something</button>
If there are multiple click handlers then the element disabled style will be removed after the last promise resolves.
Note
Throws an exception ngAutodisable requires ngClick attribute in order to work
if ngAutodisable
is on an element without ngClick
.
Devel
npm install
bower install
grunt test
grunt build
License
MIT