kirstein / angular-autodisable Goto Github PK

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,

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?

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();
      });
    }

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.

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.

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

Here is my jade template

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

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

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?

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

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.

cause ngTouch module's ngClick directive using touch event to trigger click event. and disabled element can trigger touch event. so this won't work.

I can send a PR to fix this issue, does anyone maintain this project ?