user3183717 user3183717 - 1 month ago 7
AngularJS Question

Hide parent element on click

Learning Angular JS, trying a simple function where clicking an element hides its parent element.

My code:

<div class="form-section" ng-init="visible = true" ng-show="visible">
<a class="next" ng-click="$parent.visible = false">NEXT</a>
</div>


However, nothing happens when I click my
<a>
tag.

I based my code on this fiddle: http://jsfiddle.net/oxda3aes/

Answer

You don't need the $parent

What you're doing is creating a variable on the scope called visible and setting it to true. So all you need to do to change the variable is call visible $parent isn't referencing a parent node, it's referencing a parent scope.

<div class="form-section" ng-init="visible = true" ng-show="visible">   
    <a class="next" ng-click="visible = false">NEXT</a>
</div>

http://jsfiddle.net/oxda3aes/25/

This might help you see a little better what's happening: http://jsfiddle.net/oxda3aes/26/

Here I declare the visible variable in the controller. Both accomplish the same task.

And here I have a function on the scope that gets called on click that does the same thing: http://jsfiddle.net/oxda3aes/27/