Angular ng-click - background issue

Question

I have little problem with ng-click.

My code is like this:

<div ng-click="changeVal()">
   content
   <span ng-click="changeColor()">content</span>
</div>

Of course now when I click span angular trigger two clicks (val and color). But I would like to trigger only one click (changeColor).

I can't add another element inside the div which will fill the whole div because the template I use won't allow this.

Is there a kind of method to trigger ng-click when I click on the div's background?

Answer 1

You need to stop event from propagating. Update your code to following

<span ng-click="changeColor(); $event.stopPropagation();">content</span>

Answer 2

I think you want to use $event.stopPropagation() in changeColor(). Pass $event to the function changeColor($event) OR just do changeColor();$event.stopPropagation();