CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-click
D.Evangelista
D.Evangelista

Reputation: 6543

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.

Upvotes: 4

Views: 2220

Answers (2)

Jay Shukla
Jay Shukla

Reputation: 5826

Try this

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

Upvotes: 3

doodeec
doodeec

Reputation: 2927

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

and in the controller

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

Upvotes: 11

Related Questions