How to change top-level scope variables in AngularJS nested controllers?

Question

On a page, I have the following structure:

layoutController (in the js controller: $scope.currentProject = "" )
- {{ currentProject.Name }}
- projectListController - (in the js controller, I populate the value of $scope.currentProject with an object)

The problem is that once I set the new value, {{ currentProject.Name }} remains blank.

What's missing?

guru · Accepted Answer · 2014-06-06 16:19:02Z

2

use $parent.value to access the parent controller scope.

Demo: http://plnkr.co/edit/vj0kUoiXEqH9w5OPNhsu?p=preview

answered Jun 6, 2014 at 16:19

guru

4,0221 gold badge31 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iConnor · Accepted Answer · 2014-06-06 16:20:00Z

1

You should try and default the value to a blank object like this

$scope.currentProject = ""

To

$scope.currentProject = {}

answered Jun 6, 2014 at 16:20

iConnor

20.2k14 gold badges66 silver badges98 bronze badges

Comments

Wawy · Accepted Answer · 2014-06-06 16:19:05Z

0

When you define a property in the $scope at a parent level it gets inherited through the prototype chain, if you redefine that property in a child $scope you lose that reference.

So the way to proceed would be in projectListController instead of assigning the object to currentProject you should copy the properties into it. Or assign the object to $scope.$parent.currentProject.

answered Jun 6, 2014 at 16:19

Wawy

6,2692 gold badges26 silver badges24 bronze badges

Comments

DrDyne · Accepted Answer · 2014-06-06 16:18:37Z

-1

That is because child controllers create a copy of the parent scope.

In your nested controller, you should inject $rootScope instead of $scope

answered Jun 6, 2014 at 16:18

DrDyne

1,6021 gold badge13 silver badges10 bronze badges

2 Comments

StuR Over a year ago

You don't want to pollute the $rootScope with this, so best to use $parent.

DrDyne Over a year ago

I know. Ideally you want to use directives with isolated scopes but that's not part of the question. Using $parent is very sketchy because you would be binding your projectListController to your layoutController.

Collectives™ on Stack Overflow

How to change top-level scope variables in AngularJS nested controllers?

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related