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

Posted by George Akinian
George Akinian
17,615 Points

How to access editing variable that is nested in the child scope with prototypical inheritance.

I have two scopes defined mainCtrl and coolCtrl. When I remove coolCtrl scope the hide and show directives work just fine. It was my impression that controllers are nested and child scope variables inherit parent scope variables. However in this case it proves counter-factual. ng-click is a directive within the scope of coolCtrl but it also is in the scope of mainCtrl which is a parent scope. It seams that the local scope(child scope) is incapsulating "editing" variable and renders it inaccessible in the parent scope. My question is how can I make the parent scope access the variable that is in the child's scope, under circumstances when I require two nested controllers?

Here's the code: 

<!doctype html>
<html lang="en">
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link href='styles/main.css' rel='stylesheet' type="text/css">
</head>
<body ng-app="todoListApp">

  <h1>My TODO's</h1>
 <div ng-controller="mainCtrl" class="list">
  <input type="checkbox" ng-model="todo.complete"/>
  <label ng-hide="editing" class="editing-label"  ng-click='helloWorld()'>{{todo.name}}</label>
  <input ng-show="editing" class="editing-label"  ng-model="todo.name" type="text"/>

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

    <a href="" ng-click=" editing = !editing">edit</a>
    <a href="" ng-click='helloWorld()'>save</a>
    <a href="" class="delete" ng-click='helloWorld()'>delete</a>
    <a href="" ng-click='whoAreU()'>wow!</a>
  </div>
 </div>
  <script src="vendor/angular.js" type="text/javascript"></script>
  <script src="scripts/app.js" type="text/javascript"></script>
  <script src="scripts/hello-world.js" type="text/javascript"></script>
</body>
</html>

2 Answers

Aidan Pine
Aidan Pine
9,210 Points
Aidan Pine
Aidan Pine
9,210 Points

Parents can't access scopes that are defined in their children, but children can access their parent's scopes. To do what you want to do, it'd probably be best to write a service or factory to share your variable between the scopes. Here's an example that I found a while ago:

https://gist.github.com/exclsr/3595424

George Akinian
George Akinian
17,615 Points
George Akinian
George Akinian
17,615 Points

The answer to my question is provided in the lessons to follow, and is also mentioned by Aidan Pine in his respone. Thank you Aidan!

Seth Kroger
Seth Kroger
56,414 Points
Seth Kroger
Seth Kroger
56,414 Points

Sorry, I realized I misread as in issue with the lesson instead of exploring beyond it. I can promote Aidan's comment to an answer and upvote it.