Href override parent ng-click in Angularjs

Question

I know there has been a lot of questions about overriding href or ng-click with the other but my question is different. I have some html code like this :

<tr ng-click="doSomething()">
  <complicated html>
    <a href="http://somelink">blablabla</a>
  </complicated html>
</tr>

What I would like if possible : when a user click on the link, the ng-click is not triggered and the user only go to the link.

Is it possible to do that ? Other questions on stackoverflow ask about ng-click and href that are in the same tag but this isn't the case.

Thank you !

Perhaps there's a solution for this, but anyway it would be smart to bind ng-click to something not conflicting with other clicks. — fhollste, May 20 '16 at 09:59
@Holle Read my comment to Sandeep answer to understand why ;) — clementescolano, May 20 '16 at 11:05

score 3 · Accepted Answer · edited May 23 '17 at 12:33

3

I'm not sure what is your doSomething() function ie. what you are doing in there but this could be a solution for you.

$scope.doSomething = function(event) {
  if (event.target.nodeName === 'A' || event.target.tagName === 'A') {
    console.log('target was <a>');
  } else {
    console.log('target was not <a> - do something');
  }
};

Html:

<table>
  <tr ng-click="doSomething($event)">
    <td><a href="http://google.com" target="_blank">blablabla</a></td>
  </tr>
</table>

So you check if the clicked element is a anchor link or not and do stuff based on that. You can obviously make this fit a lot of different situations.

EDIT:

You can read about tagname vs nodename and decide how you want to do it.

edited May 23 '17 at 12:33

Community

1
1

answered May 20 '16 at 10:04

thepio

6,193
5
35
54

Thank you very much ! It works exactly how I was expecting to :) In fact, the doSomething opens the same link that I want to open with the ng-click but the ng-click prevents the user to use middle-click and right-click. So when the user clicks on the row, it opens the link. And when it clicks on the actual link, it does what the user wants (in a new tab/window, or just get the link with right-click). I hope I am clear :) – clementescolano May 20 '16 at 11:09
Ok, yes I understand. Nice to hear that I was able to help you :) – thepio May 20 '16 at 11:44

score 2 · Answer 2 · answered May 20 '16 at 10:14

2

The solution of thepio works. If, however, you don't want to change your doSomething function, here is an alternative way:

<tr ng-click="doSomething()">
  <complicated html>
    <a href="" ng-click="navigateToSomeLink($event)">blablabla</a>
  </complicated html>
</tr>

In the controller, add another function navigateToSomeLink()

$scope.navigateToSomeLink = function($event) {
  $event.stopPropagation();    
  $window.open('http://somelink', '_blank');
}

answered May 20 '16 at 10:14

Sandeep Tuniki

403
5
12

Thank you for your solution ! That's what I tried in the first place but I "need" to use the href link and not the javascript link (which is what my doSomething is doing) as I want the user to be able to do custom actions (open in new tab with ctrl + click or middle-click and so on). The ng-click is a fallback (with no custom actions) when the user click somewhere else in the row. Thank you again ! – clementescolano May 20 '16 at 11:11

Href override parent ng-click in Angularjs

2 Answers2