Clever Geek Handbook

Angular fire ng-click on row but not on href

I created a page with bootstrap and I would like to have an action when the user clicks on a row. It's easy, I put ng-click

on div

, which is a string.

However, inside the string elements, I have a link and I would like to avoid being fired ng-click

when the user clicks on the link (in which case he should open the link url)

this is a picture on a line. Bascially if using clicks anywhere other than link symbol it should fill ng-click, if it clicks on simbol link it should open url.

Is it possible?

PS: I tried to put ng-click

on every element except the href element, but the href element is inside a column in other things, and if I don't put ng-click

in a column, it won't light up if use clicks on an empty column space.

<div class="col-sm-8" >
   <a href="{{club.url}}" ><i class="fa fa-link"></i></a> |
   <span class="h5 small">{{club.description}}</span>
</div>
+3


source to share


3 answers


$event.stopPropagation()

to ng-click

anchor labels for a bubble event.

Markup



<div class="col-sm-8" ng-click="myMethod()">
    <a href="{{club.url}}" ng-click="$event.stopPropagation();"><i class="fa fa-link"></i></a> |
</div>
+5


source


You have to stop the event propagation from the anchor to the parent div that has a click event handler.

<div class="col-sm-8" ng-click="onRowClick()">
   <a href="{{club.url}}" ng-click="onLinkClick($event)" ><i class="fa fa-link"></i></a> |
   <span class="h5 small">{{club.description}}</span>
</div>


Js

$scope.onLinkClick = function (e) {
  e.stopPropagation();
}
+2


source


Try adding ng-click="$event.stopPropagation();"

to your tag bindings

<a href="{{club.url}}" ng-click="$event.stopPropagation();"><i class="fa fa-link"></i></a>
+1


source






More articles:


All Articles