AngularJs - element.on('submit') is not working in my directive

Question

I am attempting to use an ng-submit call to fire a submit event to my custom directive, but it isn't firing.

Here is a plunk that illustrates my problem.

<div ng-controller="MyCtrl">
    <form name="loginForm" ng-submit="login()" novalidate="">
        <input type="submit" class='please-wait' value="Submit Me" />
    </form>
</div>

js code:

app.directive('pleaseWait', function () {
    return {
        restrict: "C",
        compile: function (element) {
            element.on('submit', function (e) {
                alert('Submit called');
            });

            element.on('click', function (e) {
                alert('Click called');
            });
        }
    };
});

http://plnkr.co/edit/lwHPVJI75q8bvVoSX1WP?p=preview

What am I doing wrong?

submit is an event of form, not input

Khanh TO
– Khanh TO

2014-07-25 02:01:05 +00:00
Commented Jul 25, 2014 at 2:01 — Khanh TO
– Khanh TO, Commented Jul 25, 2014 at 2:01
Moving the class please-wait to the form fixed it.

Scottie
– Scottie

2014-07-25 02:03:27 +00:00
Commented Jul 25, 2014 at 2:03 — Scottie
– Scottie, Commented Jul 25, 2014 at 2:03
re-post as answer and I'll accept.

Scottie
– Scottie

2014-07-25 02:11:39 +00:00
Commented Jul 25, 2014 at 2:11 — Scottie
– Scottie, Commented Jul 25, 2014 at 2:11

craigb · Accepted Answer · 2014-07-25 06:52:17Z

4

"submit" is not an event on the input element but is an event on the form so the directive is listening for an event it won't receive.

answered Jul 25, 2014 at 6:52

craigb

16.9k7 gold badges54 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJs - element.on('submit') is not working in my directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related