href overrides ng-click in Angular.js

Question

When both, href and ng-click attributes are defined:

<a href="#" ng-click="logout()">Sign out</a>

the href attribute takes precedence over ng-click.

I am looking for a way to raise priority of ng-click.

href is required for Twitter Bootstrap, I can't remove it.

Solution 1

You should probably just use a button tag if you don't need a uri.

Solution 2

This example from the angular documentation site just does href without even assigning it to an empty string:

[<a href ng-click="colors.splice($index, 1)">X</a>]

http://docs.angularjs.org/api/ng.directive:select

Solution 3

You can simply prevent the default behavior of the click event directly in your template.

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

Per the angular documentation,

Directives like ngClick and ngFocus expose a $event object within the scope of that expression.

Solution 4

Here is another solution :

<a href="" ng-click="logout()">Sign out</a>

i.e. Just remove the # from the href attribute

Solution 5

Just one more hint. If you need real URL (to support browser accessibility) you can do the following:

template:

<a ng-href="{{link}}" ng-click="$event.preventDefault(); linkClicked(link)">{{link}}</a>

directive:

$scope.linkClicked = function(link){
    // your code here
    $location.path(link);
};

In this way your code in linkClicked() will have chance to execute before navigating to the link

View more solutions

Comments

[Geoff]

Yes, if you can elaborate on how Twitter Bootstrap requires it, maybe I can help more.

[Sindre]

For the question asked, this should be the solution. Worked on Angular 1.1.5 as well

[duckegg]

It seems <a href="" ng-click=""> will prevent the ng-click in Android 2.3.x browser. I finally use <a href="javascript:void(0)" ng-click="">

[Jiří Vypědřík]

Duckegg's suggestion is the best one

[Rhys van der Waerden]

When I try this all of the links appear to be visited, which is not the behaviour I'm after. The other way (href="#") causes a page reload, which is also wrong.

[Darrrrrren]

How does this work with search engines? I am using AngularJS routing and need to maintain state in a service so for all of my internal application links I use $location, but removing href make it impossible for search engines to follow along the site.

[Juampy NR]

This makes IE9 not to show a hand cursor. Using href="" solves it.

[thenetimp]

@juampy, the hand over the link can be handled with CSS. This answer given is the official AngularJS way to do it.

[Tom Grant]

This is a great solution. If you have an href, you can right click to open it in a new tab, but on left click it calls ng-click. Exactly what I was looking for

[Jim109]

Works, the link doesn't change your url and isn't marked as visited. Best answer!

[Exocom]

This solution works and only changes the left click behaviour, right click stays intact (context menu), including the possibility to a link in href. So that is a more general solution compared to TooMuchTenacious, which actually answers the question more directly.

[sheriffderek]

The # will get treated like hash link.

[sheriffderek]

buttons can't have other element inside them, so for styling, you wouldn't want to do that - if you need things inside of it.

[Jay Jay Jay]

Once again an excellent answer. Both left and right click work

[Jason Maggard]

Worked great for allowing Bootstrap carousel controls without triggering routing. Thanks!

[Marios Fakiolas]

<a href="javscript:void(0)" ng-click="logout()">Sign out</a> will serve you well too

[Guilherme Iazzetta]

Perfect! I can continue with links and get more index in Google and use ng-click to call in Ajax. Thanks.

[Josue Rocha]

Great solution, quick and useful. Thanks!

[Naila Akbar]

You saved me.. Thanks a lot.