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) Controllers and Scope Understanding Scope In Angular

Posted by jonasdahms
jonasdahms
19,331 Points

sibling and child/parent - how do they get defined?

In this video Huston adds 2 controllers to the app. 1 is a child to the already existing "mainCtrl" controller the other one is a sibling to the "mainCtrl" controller. What I dont understand from the video, in what way do the controllers get defined so they end up as a sibling or a child? For me it looks like this

.controller("mainCtrl", { // doing mainController thingies }) .controller("theChild", { //for some reason this is defined as a child }) .controller("theSibling, { //for some reason this is defined as a sibling to the mainController })

and I simply dont spot why the second controller ends up a child and why the third controller ends up a sibling. Some clarification would be appreciated :)

5 Answers

Andrew VanVlack
Andrew VanVlack
20,155 Points

The controller's structure is set by the html tree. When using the dot notation in javascript they all get created equally on the apps module.

<div ng-controller="mainctrl">
    <div ng-controller="childctrl"></div>
</div>
<div ng-controller="sibctrl">

</div>

Check out angulars docs for more infromation about scope sierarchies

Chad Christensen
Chad Christensen
17,579 Points

Thank you! My mind was spinning because they all looked the same in the .js file to me too.

Joshua Britton
Joshua Britton
10,252 Points

Wanted to echo others' comments & thank you. Scope started making a lot more sense once I started looking at it from the perspective of DOM tree inheritance rather than how the JavaScript code was structured in the example. To be fair to Huston, he did link to the "scope" portion of the Angular docs, but I feel he still should have clarified this point. Anyway thanks for clarifying Andrew & +1!

Kameron Johnson
Kameron Johnson
11,932 Points
Kameron Johnson
Kameron Johnson
11,932 Points

Thanks! Huston made no mention of a controller's structure being set by the html tree, kind of a big point.

Francis N
Francis N
10,376 Points
Francis N
Francis N
10,376 Points

Nice! I was looking for some clarification on this too. I kind of figured it had something to do with the HTML in where the second controller was sitting inside the first controller div while the sibling controller was outside.

Christiane Deneser
Christiane Deneser
4,303 Points
Christiane Deneser
Christiane Deneser
4,303 Points

cool, thanks!! It wasn't clear to me neither how they get defined as a child or a sibling. Now I know :)

Paul Jackson
Paul Jackson
8,943 Points
Paul Jackson
Paul Jackson
8,943 Points

Thank you! This answer continues to be useful :D