AngularJS nested scopes and altering $parent scope variables

Question

Apologies if this has been asked before, I couldn't find anything on SO and I'm hoping for some clarification ( or a nice neat trick )

Given

<div ng-controller="Parent"> 
    <div ng-controller="Child">
        //child manipulation of parent scope object
    </div>
</div>

Parent sets json object so it is available to multiple child scopes -

$scope.persistentData = getAJSONObject();

A child scope wants to do some calculations and update a key of the local json object it has inherited from the parent -

doCalculations( $scope.persistentData.keyIWantToAlter )

Do I need to explicitly assign the parent scope to the result of the calculation function in the child (shown below) or is there a way that I can propogate the changes to the parent scope by just using the child's inherited scope objects?

$parent.$scope.$persistentData.keyIWantToAlter = 
    doCalculations( $scope.persistentData.keyIWantToAlter)

Please consider rewording, its currently really hard to follow what you are asking. — Nix
– Nix, Commented Mar 31, 2014 at 15:58
It is async but has been provided via resolve so it should not be treated as such once the parent scope has initialized — LiamRyan
– LiamRyan, Commented Mar 31, 2014 at 16:05
Last ? is inside of doCalculations are you do anything like $scope.persistentData = ... — Nix
– Nix, Commented Mar 31, 2014 at 16:05

Saksham · Accepted Answer · 2016-02-14 12:44:37Z

2

I can't see any problems with the blurb you gave you will need to give us more. I can caution you about trying to "share" nested objects on scope.

This fiddle illustrates what happens if you are in the child and you "overwrite" the reference. The json2 shows that these start off the same, but I overwrite the reference in the child scope and now the variables are detached.

I think you are experiencing a similar issue but can't prove it until you provide more info.

<div ng-controller="ParentCtrl">
  Hello, {{json2}}!
    <div ng-controller="ChildCtrl">
          Hello, {{json2}}!
    </div>
</div>



function ParentCtrl($scope) {
    $scope.json2 = {
         child:{
            name: 'parent'
        }
    }

}

function ChildCtrl($scope, $timeout) {

    $scope.json2 = {
         child:{
            name: 'child'
        }
    }

    $timeout(function(){
         $scope.json2.child.name= 'nick';
     },5000);
}

edited Feb 14, 2016 at 12:44

Saksham

9,4209 gold badges48 silver badges75 bronze badges

answered Mar 31, 2014 at 16:14

Nix

58.8k31 gold badges154 silver badges206 bronze badges

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

3 Comments

LiamRyan Over a year ago

Thanks it was indeed a silly overwrite I hadn't spotted which leads me to think that even though the explicit $parent references are ugly they may be safer in the long run

Nix Over a year ago

Use services ;) you can run into all kinds of issues when you rely on nested scopes.

LiamRyan Over a year ago

Thanks I must look into that, would you provide the service to the parent controller or should I be thinking entirely outside controllers ?

Collectives™ on Stack Overflow

AngularJS nested scopes and altering $parent scope variables

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related