How to prevent ng-click from firing

Question

I'd like to create a directive that binds to the 'click' event on a button and prevents ng-click from firing if a condition is met.

I'm aware I can handle this within the ng-click directive itself e.g.

ng-click="vm.form.$valid && vm.savePost(vm.post)"

But my requirements are a little more complex than that.

I did create a directive than binds to the button's click event and calls e.preventDefault() but this did not stop ng-click from firing.

I usually create a custom "sumbit()" function to perform extra checks on an `ng-click` and then a function for `ng-disable` as well. — RevanProdigalKnight, Apr 20 '15 at 12:46
well, there is 100% way - indirective just store ngClick attr to variable, then set ngClick to empty value, then bind new function on click - if condition met launched stored function. Not beatiful solution thow ( — Petr Averyanov, Apr 20 '15 at 13:40

score 1 · Answer 1 · answered Apr 20 '15 at 12:54

Maybe ngClick directive is fired first. In this case you can try to play with priority setting:

(function (module) {
    var myDirective = function () {
        return {
            restrict: 'A',
            scope: true,
            priority: 1000,
            ........
        };
    };
    module.directive("myDirective", myDirective);
}(angular.module("module")));

From the official documentation for compile:

priority

When there are multiple directives defined on a single DOM element, sometimes it is necessary to specify the order in which the directives are applied. The priority is used to sort the directives before their compile functions get called.

I tried this but it still doesn't prevent the ng-click handler from firing. — Ben Foster, Apr 20 '15 at 13:22

score 0 · Answer 2 · answered Feb 11 '19 at 14:02

I know that question is pretty old, however the directive below binds a click event handler which prevents the call of the function binded to ng-click on the same html element.

The keys are:

priority: -1: since ngClick has a priority: 0, our directive's link (post-link) function will be executed after ngClick link function, as stated in angular docs:

Directives with greater numerical priority are compiled first. Pre-link functions are also run in priority order, but post-link functions are run in reverse order. The order of directives with the same priority is undefined.

e.stopImmediatePropagation(); As stated in JQuery docs:

In addition to keeping any additional handlers on an element from being executed, this method also stops the bubbling by implicitly calling event.stopPropagation().

Directive code:

.directive('noClick', [function(){
        return {
            priority: -1,
            link: function(scope, iElem, iAttr){
                iElem.on('click', noClick);

                function noClick(e) {
                    e.stopImmediatePropagation();
                    e.preventDefault();
                }
            }
        };
    }])

HTML code

<div no-click ng-click="myFunct()">

Credits to this answer

score -1 · Answer 3 · answered Apr 20 '15 at 12:47

-1

Prevent default is used to prevent normal action. For example doesn't go to the target, or button doesn't submit and etc..

ng-click and onclick aren't default action and you can't prevent it with preventDefault.

You have to use function in ng-click, to make conditions before action.

answered Apr 20 '15 at 12:47

Kristiyan

1,655
14
17

Ofc, in general u can prevent ng-click. – Petr Averyanov Apr 20 '15 at 12:54
@PetrAveryanov you can prevent onclick event with stopPropagation. – Kristiyan Apr 20 '15 at 13:16

How to prevent ng-click from firing

3 Answers3