Angular directive with click event gets called twice

Question

I'm having an issue where my click event is getting called twice. Not sure what I'm missing but I've only included this directive once in my application. I have tried adding the directive to one element only but the call is still happening twice.

Can someone take a look at the code and tell me what i'm missing please?

angular.module('mymodule', [])
.directive('mydirective', function () {
    return {
        restrict: 'AE',
        link: function ($scope, $element, $attrs) {

            $element.children().bind('click', function () {

                console.log("test" + this);

                if ($element.hasClass('active')) {
                    $element.removeClass('active');
                    return;
                } else if (!$element.hasClass('active')) {
                    $element.addClass('active');
                    return;
                }
            });
        }
    }
});

$element.toggleClass('active'); return; for all your condition there. Not sure why double click is happening... try event.stopPropagation(); — Ashish Kumar
– Ashish Kumar, Commented Jan 27, 2014 at 10:01
try adding the click event to parent element and not to children, for example try $element.parent()..bind('click', function () ... — Alex Choroshin
– Alex Choroshin, Commented Jan 27, 2014 at 10:02

ssilas777 · Accepted Answer · 2014-01-27 10:00:59Z

5

use this inside the click function to stop bubbling the event

 e.stopPropagation();

To know more check this

answered Jan 27, 2014 at 10:00

ssilas777

9,7704 gold badges48 silver badges70 bronze badges

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

Comments

r0u9hn3ck · Accepted Answer · 2017-08-12 10:31:45Z

3

I know I'm late in answering this, and a few months back I was facing this issue too. However, a gentleman over here asked me to append this into the directive. And, it worked great!

e.stopImmediatePropagation();

answered Aug 12, 2017 at 10:31

r0u9hn3ck

5434 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular directive with click event gets called twice

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related