AngularJS: prevent ng-click from being executed

Question

This is a pseudo code of a Directive I'm modifying. Let's assume I have the following event handlers:

<a my-link ng-click="foo()" foo-check="fooCheck"></a>

angular.module('linkModule')
.directive('mylink', function () {

    return {
        restrict: 'A',
        scope: {
            fooCheck: '='
        },
        link: function link ($scope, $element) {

            // bar method has some vital function 
            // for this directive`s functionality and must be run 
            // ONLY if certain conditions are met.
            var bar = function bar () {
                console.log('Executing bar');
            };

            $element.on('click', function (e) {
                e.preventDefault();

                // Validate something here
                var mustContinue = $scope.fooCheck();

                if ( mustContinue ) { 
                    bar(); 
                } else {
                    // Cancel ng-click here
                }
            });
        }
    };
});

So, my question is: Can I prevent the ng-click event from being executed from the directive's link event listener?

Arg0n · Accepted Answer · 2015-11-23 14:09:43Z

1

Maybe something like this?

HTML

<a my-link ng-click="foo" foo-check="fooCheck" text="Click me!"></a>

JavaScript

var myApp = angular.module('myApp',[])
    .directive('myLink',[function () {
        return {
            restrict: 'A',
            scope: {
                fooCheck: '=',
                ngClick: '=',
                text: '@'
            },
            template: '<div ng-click="click($event)">{{text}}</div>',
            controller: function ($scope) {
                var bar = function bar () {
                    console.log('Executing bar');
                };
                $scope.click = function(evt){
                    var mustContinue = $scope.fooCheck();
                    if (mustContinue) { 
                        bar();
                        $scope.ngClick();
                    }
                }
            }
        };
    }]);

myApp.controller("myController",["$scope", function($scope){
    $scope.fooCheck = function(){
        return true;   
    }
    $scope.foo = function(){
        console.log("Foo executed");   
    }
}]);

answered Nov 23, 2015 at 14:09

Arg0n

8,4532 gold badges26 silver badges39 bronze badges

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

1 Comment

darksoulsong Over a year ago

Very interesting approach. I'm happy I can use a template in this particular case, otherwise it wouldn't work.

Theo Itzaris · Accepted Answer · 2015-11-24 06:32:04Z

1

you can do a compare expression into your ng-click and check true or false with a flag. if it is true the ng-click will be active otherwise it is disabled.

example: if hasBackground = true the expand function is executed.

<i style="cursor: pointer" class="fa fa-expand fa-3x" ng-click="hasBackground || expand()"></i>

hope helps good luck.

answered Nov 24, 2015 at 6:32

Theo Itzaris

4,7067 gold badges44 silver badges77 bronze badges

Comments

Max · Accepted Answer · 2015-11-23 13:35:33Z

0

You can try if

e.stopPropagation()

works for you.

answered Nov 23, 2015 at 13:35

Max

8821 gold badge9 silver badges19 bronze badges

Collectives™ on Stack Overflow

AngularJS: prevent ng-click from being executed

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related