Angular directive that extends ngClick behaviour allowing it to automatically disable target element if the handler returns a promise

Downloads in past


6380.2.28 years ago9 years agoMinified + gzip package size for angular-autodisable in KB


angular-autodisable Build Status
An extension to angular ng-click directive that automatically sets the element to disabled if the handler would return a promise.


  1. angular.js version >1.2+
  2. following es5 functions:
1. [`bind`](
2. [`map`](
3. [`forEach`](
4. [`indexOf`](


Include ngAutodisable as dependency
angular.module('MyApp', [ 'ngAutodisable', ... ]);

If that's done then just follow those simple steps:  

1. just attach `ng-autodisable` directive to the element which happens to have `ng-click` directive OR a form that has the `ng-submit` directive.
2. ???
3. profit!

#### On an element
Do something
Do something
#### On a form
<button type="submit">Submit</button> 
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.
ng-autodisable-class="class1 class2" ng-autodisable> Do something
ng-autodisable-class="class1 class2" ng-autodisable> ... <button type="submit">Submit</button>
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:  
Do something
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 ```