Weird behaviour with angularjs ng-click

Question

I have the following code, which is a template of directive:

<div ng-click="showDetails=true" ng-init="showDetails=false"> <div ng-show="showDetails"> <div ng-click="showDetails=false">X</div> </div> </div>

When I click on the outer div, the inner div shows, but when I click on the 'X', it doesn't go away. When I rewrite the code, and use 'ng-mouseover' instead of 'ng-click', it works fine (i.e. first click makes the div appear, hovering over the 'X', makes it disappear):

<div ng-click="showDetails=true" ng-init="showDetails=false"> <div ng-show="showDetails"> <div ng-mouseover="showDetails=false">X</div> </div> </div>

Anyone has a clue what might be the problem of 'ng-click' not working? Thank you

I don't have a controller for this directive. Instead, it's instantiated many times inside an outer directive which has a controller that has no functionality regarding this specific problem — Gal
– Gal, Commented Oct 16, 2014 at 9:27

Ben Heymink · Accepted Answer · 2014-10-16 09:33:27Z

Your click event is propagating up, so after setting showDetails to false, it then sets it to true again in the outermost div! Try this:

<div ng-click="showDetails=true" ng-init="showDetails=false"> <div ng-show="showDetails"> <div ng-click="showDetails=false;$event.stopPropagation()">X</div> </div> </div>

Collectives™ on Stack Overflow

Weird behaviour with angularjs ng-click

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related