angular-autodisable

WebJar for angular-autodisable

License

License

MIT
Categories

Categories

Github Development Tools Version Controls Angular User Interface Web Frameworks Auto Application Layer Libs Code Generators
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

github-com-kirstein-angular-autodisable
Last Version

Last Version

0.2.2
Release Date

Release Date

Type

Type

jar
Description

Description

angular-autodisable
WebJar for angular-autodisable
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/kirstein/angular-autodisable

Download github-com-kirstein-angular-autodisable

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/github-com-kirstein-angular-autodisable/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>github-com-kirstein-angular-autodisable</artifactId>
    <version>0.2.2</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-kirstein-angular-autodisable/
implementation 'org.webjars.bower:github-com-kirstein-angular-autodisable:0.2.2'
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-kirstein-angular-autodisable/
implementation ("org.webjars.bower:github-com-kirstein-angular-autodisable:0.2.2")
'org.webjars.bower:github-com-kirstein-angular-autodisable:jar:0.2.2'
<dependency org="org.webjars.bower" name="github-com-kirstein-angular-autodisable" rev="0.2.2">
  <artifact name="github-com-kirstein-angular-autodisable" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='github-com-kirstein-angular-autodisable', version='0.2.2')
)
libraryDependencies += "org.webjars.bower" % "github-com-kirstein-angular-autodisable" % "0.2.2"
[org.webjars.bower/github-com-kirstein-angular-autodisable "0.2.2"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.bower : angular jar (1.2.0,)

Project Modules

There are no modules declared in this project.

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.

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

  <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

Versions

Version
0.2.2