AngularJS - Child controller private scope (preventing inheritance)

Question

I have a case where I need to nest controllers. I do not want the child scope to inherit from the parent scope because I have scope variables with the same names in both controllers. Is there a way to do this?

I am trying to prevent the childController's variable from being updated when the parentController's variable is changed.

<div ng-controller="parentController">
     {{myVariable}}
     <div ng-controller="childController">
          {{myVariable}}
     </div>
</div>

I am aware that I can change the name of the child controller's scope variable to avoid the inheritance problem completely, but I am looking for an alternative. Is there any known way to do this?

Kind of like isolating the scope of a directive, but isolated or private controller scope.

Edit: I have discovered that the child controller will inherit the parent controller scope var value when there is no default value for that var set in the child controller.

Compare: http://jsfiddle.net/4qcqdb6z/ to http://jsfiddle.net/4qcqdb6z/2/

What about creating a transclude directive with an empty scope? and your childController attached — apairet
– apairet, Commented Aug 14, 2014 at 17:45
That's interesting! I'll take a look into that. Do you mind providing an example of what you have in mind? — Chris Bier
– Chris Bier, Commented Aug 14, 2014 at 17:45
What exactly is the problem? The child div will display the myVariable from the child controller, and the parent div will display the myVariable from the parent controller. Isn't that what you want? — JB Nizet
– JB Nizet, Commented Aug 14, 2014 at 17:54
The way you did it is fine. You can also consider using the controller as syntax (docs.angularjs.org/api/ng/directive/ngController), but I dislike it personally. — JB Nizet
– JB Nizet, Commented Aug 14, 2014 at 19:43

Amin Mohamed Ajani · Accepted Answer · 2015-10-05 10:30:37Z

1

I just had this problem while developing my own form. I came here to find no response. So I figured it out myself. So for your code,

<div ng-controller="parentController">
     {{myVariable}}
     <div ng-controller="childController">
          {{myVariable}}
     </div>
</div>

your child controller should include a scope:{}

.controller('childController',  ['$scope', function($scope){
 scope:{}; //this prevents it from inheriting the parent scope variables
}])

I know the answer is pretty late but hope those who come across this from now find it helpful

answered Oct 5, 2015 at 10:30

Amin Mohamed Ajani

2945 silver badges15 bronze badges

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

Comments

Aral Roca · Accepted Answer · 2016-03-29 12:11:13Z

0

Try this:

<div ng-controller="parentController as parent">
     {{parent.myVariable}}
     <div ng-controller="childController as child">
          {{child.myVariable}}
     </div>
</div>

In the controllers:

.controller('childController',  [, function(){
     var vm = this; // You can use now vm like $scope
}])

answered Mar 29, 2016 at 12:11

Aral Roca

5,9978 gold badges52 silver badges83 bronze badges

Comments

Wilco · Accepted Answer · 2017-01-11 11:34:06Z

A way to achieve this is to use Object.defineProperty in the child controller

.controller('childController',  ['$scope', function($scope){
    Object.defineProperty($scope, 'myVariable', { value: 'childControllerValue', writable: true });
}])

This will create a variable myVariable on the child scope that can be set independently of a variable with the same name on the parent scope.

Angular inheritance works because the parent scope is the prototype of the child scope, so if in your child scope you try to access or assign to $scope.myVariable , javascript internally looks back up the prototype chain and actually accesses $scope.__proto__.myVariable. By defining a new property directly on the object you mask this inherited property, allowing independent values.

This works when using {{myVariable}} in the view. I've tested it with watchers as well, which will watch the variable that is on their scope, not a parent or child version of it. See https://plnkr.co/edit/mXLNGAGc0q8T36DV43aK for some testing.

Collectives™ on Stack Overflow

AngularJS - Child controller private scope (preventing inheritance)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related