How to preventDefault on anchor tags?

According to the docs for ngHref you should be able to leave off the href or do href="".

<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />

UPDATE: I've since changed my mind on this solution. After more development and time spent working on this, I believe a better solution to this problem is to do the following:

<a ng-click="myFunction()">Click Here</a>

And then update your css to have an extra rule:

a[ng-click]{
    cursor: pointer;
}

Its much more simple and provides the exact same functionality and is much more efficient. Hope that might be helpful to anyone else looking up this solution in the future.

The following is my previous solution, which I am leaving here just for legacy purposes:

If you are having this problem a lot, a simple directive that would fix this issue is the following:

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

It checks all anchor tags (<a></a>) to see if their href attribute is either an empty string ("") or a hash ('#') or there is an ng-click assignment. If it finds any of these conditions, it catches the event and prevents the default behavior.

The only down side is that it runs this directive for all anchor tags. So if you have a lot of anchor tags on the page and you only want to prevent the default behavior for a small number of them, then this directive isn't very efficient. However, I almost always want to preventDefault, so I use this directive all over in my AngularJS apps.

You can pass the $event object to your method, and call $event.preventDefault() on it, so that the default processing will not occur:

<a href="#" ng-click="do($event)">Click</a>

// then in your controller.do($event) method
$event.preventDefault()

I prefer to use directives for this kind of thing. Here's an example

<a href="#" ng-click="do()" eat-click>Click Me</a>

And the directive code for eat-click:

module.directive('eatClick', function() {
    return function(scope, element, attrs) {
        $(element).click(function(event) {
            event.preventDefault();
        });
    }
})

Now you can add the eat-click attribute to any element and it will get preventDefault()'ed automagically.

Benefits:

1. You don't have to pass the ugly $event object into your do() function.
2. Your controller is more unit testable because it doesn't need to stub out the $event .object

Although Renaud gave a great solution

<a href="#" ng-click="do(); $event.preventDefault()">Click</a> 

I personally found you also need $event.stopPropagation() in some cases to avoid some of the side effects

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">
    Click</a>

will be my solution

ng-click="$event.preventDefault()"

The easiest solution I have found is this one :

<a href="#" ng-click="do(); $event.preventDefault()">Click</a>

So reading through these answers, @Chris still has the most "correct" answer, I suppose, but it has one problem, it doesn't show the "pointer"....

So here are two ways to solve this problem without needing to add a cursor:pointer style:

1. Use javascript:void(0) instead of #:

   <a href="javascript:void(0)" ng-click="doSomething()">Do Something</a>
   

2. Use $event.preventDefault() in the ng-click directive (so you don't junk up your controller with DOM-related references):

   <a href="#dontGoHere" ng-click="doSomething(); $event.preventDefault()">Do Something</a>
   

Personally I prefer the former over the latter. javascript:void(0) has other benefits that are discussed here. There is also discussion of "unobtrusive JavaScript" in that link which is frighteningly recent, and doesn't necessarily directly apply to an angular application.

You can do as follows

1.Remove href attribute from anchor(a) tag

2.Set pointer cursor in css to ng click elements

 [ng-click],
 [data-ng-click],
 [x-ng-click] {
     cursor: pointer;
 }

if still relevant:

<a ng-click="unselect($event)" />

...

scope.unselect = function( event ) {
 event.preventDefault();
 event.stopPropagation();
}

...

HTML

here pure angularjs: near to ng-click function you can write preventDefault() function by seperating semicolon

<a href="#" ng-click="do(); $event.preventDefault();$event.stopPropagation();">Click me</a>

JS

$scope.do = function() {

    alert("do here anything..");
}


                              (or)

you can proceed this way,this is already discussed some one here.

HTML

   <a href="#" ng-click="do()">Click me</a>

JS

$scope.do = function(event) {

event.preventDefault();
event.stopPropagation()

}

I would go with:

<a ng-click="do()">Click</a>

• because according to the docs you should be able to leave of the href and then Angular will handle the prevent default for you!

Whole this prevent default thing has been confusing to me, so I have created a JSFiddle there illustrate when and where Angular is preventing default.

The JSFiddle is using Angular's a directive - so it should be EXACTLY the same. You can see the source code here: a tag source code

I hope this will help clarification for some.

I would have liked to post the doc to ngHref but I can't because of my reputation.

Since you are making a web app why do you need links?

Swap your anchors to buttons!

<button ng-click="do()"></button>

Or if you need inline then you can do this:

<a href="#" ng-click="show = !show; $event.preventDefault()">Click to show</a>

This is what I always do. Works like a charm!

<a href ng-click="do()">Click</a>

The safest way to avoid events on an href would be to define it as <a href="javascript:void(0)" ....>

Borrowing from tennisgent's answer. I like that you don't have to create a custom directive to add on all the links. However, I couldnt get his to work in IE8. Here's what finally worked for me (using angular 1.0.6).

Notice that 'bind' allows you to use jqLite provided by angular so no need to wrap with full jQuery. Also required the stopPropogation method.

.directive('a', [
    function() {
        return {
            restrict: 'E',
            link: function(scope, elem, attrs) {

                elem.bind('click', function(e){
                    if (attrs.ngClick || attrs.href === '' || attrs.href == '#'){
                        e.preventDefault();
                        e.stopPropagation();
                    }
                })
            }
        };
    }
])

I ran into this same issue when using anchors for an angular bootstrap drop down. The only solution I found that avoided unwanted side effects (ie. the drop down not closing because of using preventDefault()) was to use the following:

 <a href="javascript:;" ng-click="do()">Click</a>

I need a presence of href attribute's value for degradation (when js is switched off), so I can't use empty href attribute (or "#"), but the code above did not work for me, because i need an event (e) variable. I created my own directive:

angular.module('MyApp').directive('clickPrevent', function() {
  return function(scope, element, attrs) {
    return element.on('click', function(e) {
      return e.preventDefault();
    });
  };
});

In HTML:

<a data-click-prevent="true" href="/users/sign_up" ng-click="openSignUpModal()">Sign up</a>

/* NG CLICK PREVENT DEFAULT */

app.directive('ngClick', function () {
    return {
        link: function (scope, element, attributes) {
            element.click(function (event) {
                event.preventDefault();
                event.stopPropagation();
            });
        }
    };
});

An alternative might be:

<span ng-click="do()">Click</span>