I have a site using ui-router where I have a table and I have an ng-click on the cells, but have a link inside the cell. I need to disable the ng-click from the cell, when the link is clicked.
<div ng-click="click()" style="background: #d3d3d3">
<a ui-sref="about">go to about page</a>
</div>
When I click this link, I want it to go to the about page, but not call the click function. Here's a plnkr:
This is a little different than my actual site, but this has the same behavior (div instead of table). I've tried adding ng-click="$event.preventDefault()" but that did not resolve it either.
Any help is appreciated. Thanks!
I have a site using ui-router where I have a table and I have an ng-click on the cells, but have a link inside the cell. I need to disable the ng-click from the cell, when the link is clicked.
<div ng-click="click()" style="background: #d3d3d3">
<a ui-sref="about">go to about page</a>
</div>
When I click this link, I want it to go to the about page, but not call the click function. Here's a plnkr: http://plnkr.co/edit/kE9CZYcYu1OPA9S0K3Jk?p=preview
This is a little different than my actual site, but this has the same behavior (div instead of table). I've tried adding ng-click="$event.preventDefault()" but that did not resolve it either.
Any help is appreciated. Thanks!
Share Improve this question asked May 6, 2015 at 19:08 TimothyTimothy 1,1603 gold badges12 silver badges33 bronze badges 4-
ng-click="$event.stopPropagation()"on the anchor perhaps so that it does not bubble up to run theclick()on its parent. – PSL Commented May 6, 2015 at 19:16 - @PSL that worked. You're awesome! If you put this as an answer, I'll accept it. – Timothy Commented May 6, 2015 at 19:21
- 1 Timothy - @:charlietfl has updated his answer since, which you may accept.. – PSL Commented May 6, 2015 at 19:22
- @Timothy: Rather than adding an unnecessary ng-click event on your link, try to use $event.currentTarget and execute you event handler code. This don't require you to add ng-click on anchor tag. Because you have anchor tag in table column you will end up with lot of event handler for anchor tags. So I think performance wise this would be better with only required event handler on your table cell. – Jagadish Dharanikota Commented May 6, 2015 at 19:28
2 Answers
Reset to default 6Prevent propagation of event on the <a> tag bubbling to the div
<a ui-sref="about" ng-click="$event.stopPropagation()">go to about page</a>
Another way is to check target of click inside the click handler
<div ng-click="click($event)">
JS
$scope.click = function(e){
if( e.target.tagName ==='A'){
return; // skip click event handler
}
// rest of click code
}
You should try $event.stopProgation()
<div ng-click="click();" style="background: #d3d3d3">
<a ui-sref="about" ng-click="$event.stopProgation()">go to about page</a>
</div>
Which will not propagate events to there parents.