CODEWITHSUNDEEP
javascripthtmlangularjs
clementescolano
clementescolano

Reputation: 505

Href override parent ng-click in Angularjs

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 !

Upvotes: 1

Views: 690

Answers (2)

thepio
thepio

Reputation: 6263

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.

Upvotes: 3

Sandeep Tuniki
Sandeep Tuniki

Reputation: 403

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');
}

Upvotes: 2

Related Questions