5

tl;dr: How can I force angular to only execute the ngclick directive in an <a> element without emptying/removing the href?

My site has some custom behavior on some elements (modal opens, location bar updates, etc.) but for SEO indexing I also need it to be an <a> element with an href attribute containing a valid link.

Such as:

<a href="/{{item.url}}" ng-click="doCustomStuff(item)">some link</a>

However, angular also executes the href and the routing makes my custom ng-click logic useless.

Is there a way to invert this behavior?

Rahil Wazir
  • 10,007
  • 11
  • 42
  • 64
Phil Thomas
  • 1,237
  • 1
  • 12
  • 33

1 Answers1

11

You should pass $event parameter to onclick function and execute e.preventDefault() method;

<a ng-click="clickHandler($event)" href="/home" >home</a>

and in controller:

$scope.clickHandler = function(e){
   e.preventDefault();
}

Example:

http://plnkr.co/edit/sKHST3GkRENtxptxr0mK?p=preview

Goodnickoff
  • 2,267
  • 1
  • 15
  • 14