AngularJS - ng-click over ng-click

Question

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.

possible duplicate of [What's the best way to cancel event propagation between nested ng-click calls?](http://stackoverflow.com/questions/15193539/whats-the-best-way-to-cancel-event-propagation-between-nested-ng-click-calls) — Stewie, Feb 11 '14 at 12:58

score 11 · Accepted Answer · answered Feb 11 '14 at 12:53

11

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

and in the controller

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

answered Feb 11 '14 at 12:53

doodeec

2,927
19
23

score 3 · Answer 2 · answered Feb 11 '14 at 12:54

3

Try this

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

answered Feb 11 '14 at 12:54

Jay Shukla

5,794
8
33
63

AngularJS - ng-click over ng-click

2 Answers2