Taranys / angular-autodisable

ngAutodisable directive for angular. Automatic disable for buttons rocks!

angular-autodisable

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

Requirements

---

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

Usage

---

Include ngAutodisable as dependency

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

If thats done then just follow those simple steps:

1. just attach ng-autodisable directive to the element which happens to have ng-click directive.
2. ???
3. profit!

  <button ng-click="doSomething()" ng-autodisable>Do something</button>

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 fulfils 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