kirstein / angular-autodisable Goto Github PK

ngAutodisable directive for angular. Automatic disable for buttons rocks!

Home Page: http://jsfiddle.net/kirstein/wXnks/embedded/result/

License: MIT License

JavaScript 100.00%

angular-autodisable's Introduction

angular-autodisable

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

Requirements

angular.js version >1.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:

just attach ng-autodisable directive to the element which happens to have ng-click directive OR a form that has the ng-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

angular-autodisable's People

Contributors

Stargazers

Watchers

angular-autodisable's Issues

jqLite's find() is limited to lookups by tag name

therefore, this snippet never finds any buttons to disable

          handler = handlerInstance(element.find('button[type=submit]'),
              SUBMIT_EVENT,
              getLoadingClass(attrs),
              getCallbacks(attrs[SUBMIT_ATTR]));

maybe you could use something like element[0].querySelectorAll('button[type=submit]') instead?

Click event registered on forms

When using the directive with forms it looks like a click event is being registered. When I click into my form, the ng-submit handler is invoked.

My HTML:

      <form name="formMenuItem" ng-submit="vm.saveMenuItem()" ng-autodisable>
        <button class="btn btn-primary" type="submit" ng-disabled="formMenuItem.$invalid">
          <span ng-if="vm.menuItem.id">Add Menu Item</span>
          <i class="icon icon-tick"></i>
        </button>
      </form>

Controller:

    function saveMenuItem() {
      return vm.menuItem.id ? updateMenuItem() : addMenuItem();
    }

    function addMenuItem() {
      return menuService.addMenuItem(menu, vm.menuItem).then(function (mi) {
        menu.items.push(mi);
        notify.success('Menu Item added successfully.');
        resetMenuItemForm();
      });
    }

Please add 0.0.2 tag for the forms support

Change ng-* prefix

The prefix ng-* in directive might conflict with future native directives.

add readme example for form-submit

'disabled' attribute is ineffective on an 'a' element

Hello,
First, thank you very much for this great module. I use it in my new project and it is very useful and convenient.
I think the following pattern is commonly used :

<a href="" ng-click="myFunction()">Myfunction</a>

With angular-autodisable, it would be useful to write that:

<a href="" ng-click="myFunction()" ng-autodisable>Myfunction</a>

Unfortunately, it does not work, since the disabled attribute does not forbid the ng-click to occur.
I made a fix for my project: I get the element to disable as a parameter of triggerHandler and I immediatly return in triggerHandler if this element has the disabled attribute.

ngAutodisable doesn't work when form is inside element with ngIf directive

If the <form ng-autodisable> element is inside a <div ng-if='true'> element, then the button is not disabled when submitting the form.

See repro:
http://plnkr.co/edit/0LDH2n5HxzEJALZ8lLZ0?p=preview

autodisable form submit button

I'm trying to use this directive on a form with a button[type="submit"]. The problem is...

The child button is generated in a directive itself. (<md-button type="submit">Submit</md-button).

This is likely an issue where the child button is processed after the parent ng-autodisable linking function has run. Any suggestions?

does not work within a transclude directive.

a tranclude directive will clone its children element, that would make the elementToDisalbe in handlerInstance different from real element. so the disable won't work.

I think you should do the handlerInstance within linkFn instead of compile,

need to config when to disable.

when I submit a form in $modal(with animation: true), if I click very fast, the form will submit twice.
Because when the promise is done, the disabled is set to false, but the animation is not completed, I can still submit the form if I click very fast.
so, I want to config when to set disable to false.
In this scenorio, I want just when the promise is success, I set the disable to fase.

handling ng-disabled

One might want to disable / enable form inputs depending on some state. Currently, ng-autodisable and ng-disabled don't work well together, and we could have the situation where ng-autodisable has disabled an input, but a digest caused ng-disabled to reenable it while promise is not resolved yet.

Maybe there could be a simple / clever way to handle this.

form(name='signInForm' ng-submit="signIn()" ng-autodisable)
  input(type="email" ng-model="email" placeholder='Email' ng-required='true')
  input(type="password" ng-model="password" placeholder='Password' ng-required='true')
  button(type="submit" ng-disabled="signInForm.$invalid") Sign In

$event is rewriten by ng-autodisable

http://jsfiddle.net/wXnks/13/
You can see in the console
the event is not an object anymore
it's a 'click' string