Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AngularJS Basics (1.x) Using Angular's Built In Directives Using ng-click To Change Application States

ng-hide not working. Why is it?

It appears my ng-hide is not working for some reason. Any idea anyone?

Here's my code snapshot: http://w.trhou.se/f5u4v74cbj

5 Answers

The problem was in line 17. The instructor updated the workspace file from previous course but our workspace was not updated. The coolCtrl needed to be removed to get the scope right like akak explained above.

From

<div class="actions" ng-controller="coolCtrl">

To

<div class="actions">

This fixed it! Thanks!

akak
akak
29,445 Points

I have one. I think it's about how prototypical inheritance works in JS in general. Long story short JS looks first in the object you try to access for a variable, and if it can't find it - it looks in that object's prototype.

You have two controllers nested so it's a parent-child relationship. The $scope defined in each of them is not like global accessible variable ($rootScope is, but that's other topic). So now in your code you have $scope.editing in child scope, and an ng-hide "listening" for change on $scope.editing in parent's scope. So when you change the child's $scope.editing from true to false that change applies only to that scope. It does not translate upwards.

If you'd have a different kind of scenario - an edit button in the parent's scope and the input in child's scope - that would work. In that scenario child scope doesn't have property $scope.editing so it looks up to the parent's scope and then depending of is it true or false - changes the visibility. But beware - if you'd declare $scope.editing in both scopes it would not work for the same reason as before. Child scope would find $scope.editing in it's own controller so it would not look into parent's.

Generally, the most solid way to share this kind of things between controllers in Angular is to use a service. Some people also say that you should always use Controller As syntax, but I think for the small projects it's not required.

Thanks Aka appreciate the explanation.

This was also driving me crazy! Myworkspace still had the nested coolCtrl on the actions div, which is nested in the mainCtrl. I guess it helped me understand that parent-child relationship, but I was going crazy for a minute.

I could swear with the other teamtreehouse lessons, as I get to a new video and click on the launch workspace, I get a new updated workspace with new code changes. For some reason, throughout this Angular lesson, I'm using the exact same workspace from the beginning, throughout the videos (any changes to the code that aren't in the video are causing bugs).

Jong Kun Baeck
Jong Kun Baeck
49,309 Points

I had same problem like you but I fixed it with your help. thanks.

Joe Hochgreve
PLUS
Joe Hochgreve
Courses Plus Student 2,110 Points

Ahhhhh! Thanks for finding that....was driving me insane!

Shreyas Ananth
Shreyas Ananth
861 Points

Oh man! That saved me!! Thanks a ton brother! coolctrl from previous videos needs to be removed.........DAMN!

Did the instructor mention about it?