Geek asks and answers

AngularJS - ng-click over ng-click

I have html code like:

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

The outer div with a ng-clickand the inner div with another ng-click.

My problem: when I click on the inner div, the outer one also gets fired. What can I do to solve this problem (shoot internal, not external?)

I can get it to work using the hardcoded flag, but not sure if I am facing a race condition problem .

Here is a fiddle illustrating the problem.

+3
source share
2 answers
<div class="innerdiv" data-ng-click="showText($event)">

and in the controller

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

try it

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

More articles:


All Articles