Beterraba Beterraba - 2 months ago 15
AngularJS Question

AngularJS - ng-click over ng-click

I have a html code like the following:

<div class="outerdiv" data-ng-click="resetText()">
<div class="innerdiv" data-ng-click="showText()">
{{ text }}
</div>
</div>


An outer div with a
ng-click
and an inner div with a different
ng-click
.

My problem is: when I click the inner div, the outer one is being fired as well. What can I do to solve this (fire the inner function, not the outer one?

I can make it work using a hardcoded flag, but not sure if I'm in face of a race condition problem.

Here is a Fiddle illustrating the problem.

Answer
<div class="innerdiv" data-ng-click="showText($event)">

and in the controller

$scope.showText = function(event) {
    // whatever
    event.stopPropagation();
}
Comments