Beterraba Beterraba - 1 month ago 5
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 }}

An outer div with a
and an inner div with a different

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.

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

and in the controller

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