Prevent default anchor behaviour AngularJS

When the user clicks a link, I want to execute some code in a function inside the controller. But I want to prevent that the URL changes.

I tried the following possibilities

  1. Removed the href-attribute. Didn't work, still changes the url to '/'

  2. Tried ng-click='deleteUser(user.id, $event)' and $event.preventDefault() in my deleteUser()-function. Didn't work.

  3. What did work is a hack I've found on GitHub about an unintended reload.

This is how I do it now:

<a ng-click="deleteUser(user.id)" href="javascript:">Delete user</a>

Question

What is the'clean' method to prevent a link from changing the URL?

<a ng-click="deleteUser(user.id)" href="">Delete user</a>

What exactly didn't work when you removed the href attribute? That's exactly what you should do. See this fiddle for an example: http://jsfiddle.net/terebentina/SXcQN/

I have always been doing deleteUser($event,user.id) and it seemed to work. A possible problem would be the ordering of the variables to your click handler. The first argument should probably be the $event object.

The real problem is in the a directive

That's right, every <a></a> element is actually an AngularJS directive.

It seems to fix some issues with IE if you look the comments in the code.

But everything for me is working great when I just removed the directive from the AngularJS core code.

I was having the same problem as you did and tried all of the other solutions. The difference is that I had the problem only in IE.

If you don't want to play with building the AngularJS script from source, just search for htmlAnchorDirective in the angular.js file and remove/comment it out.

I believe there is a bigger problem here which should be addressed in the AngularJS core, but I haven't found it yet.

UPDATE: This solution is most probably outdated now! You should try using the latest AngularJS version.

This is admittedly a hack, but I did:

<span class="link" ng-click="deleteUser(user.id)">Delete user</span>

and in my css had

span.link {
    /* style like a link */
}

I use my custom directive to accomplish this. Its mechanism is to operate ng-click directive itself.

angular.module('delete', [])
.directive('buttonDelete', ['$parse', function ($parse) {
    var confirmFunc = function (scope, element, attr, event, ngClick) {
        if (! confirm("Are you sure?")) {
            event.preventDefault();
        }
        else {
            // Copy from ngEventDirectives initialization.
            var fn = $parse(ngClick);
            scope.$apply(function() {
                fn(scope, {$event:event});
            });
        }
    };

    return {
        restrict: 'C',
        compile: function (element, attr) {
            var ngClick = attr.ngClick;
            attr.ngClick = '';

            return {
                pre: function (scope, element, attr) {
                    element.click(function (e) {
                        confirmFunc(scope, element, attr, e, ngClick);
                    });
                }
            };
        }
    };
}]);

The following worked great for me:

<a ng-href="javascript: return false;" ng-click="alertSearchCtrl.deleteAlert()">Remove</a>