current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Hi I need a AngularJS Wiz to point me in the right direction been trying to get my head around AngularJS Scope and Inheritance. I have a child Scope which I add to a Parent Scope then I want to add a new object to the Parent scope via array.push(); but I'm not sure why the Child scope then inherits this new value. See the fiddle here http://jsfiddle.net/sjmcpherso/EFxuZ/ The first example using ng-repeat and objects causes the child to update:

$scope.childArr = [{'name':'peter'},{'name':'paul'},{'name':'perry'}];
$scope.parentArr = $scope.childArr;
$scope.parentArr.push({'name':'Why am I in now in the Child Array?'})

Whereas the second example using just a variable does not:

$scope.childVar = "Confused Muchly";
$scope.test.parentVar = $scope.childVar;
$scope.test.parentVar = "This wont change the child variable";

Ideally I would like to make changes to the child scope which would update the parent scope but not the other way around.

I have read of https://github.com/angular/angular.js/wiki/Understanding-Scopes while not fully understanding everything this issue seems a mystery to me.

share|improve this question

1 Answer 1

up vote 2 down vote accepted

Firstly, both of your models $scope.childArr and $scope.test.parentArr are in $scope of the controller. None of them is in parent scope.

If you want to have parentArr in the parent scope, then you should have a parent-child controller design or move your model inside the rootScope:

$rootScope.test = {};
$rootScope.test.parentArr = [ /* some items here */ ];

Secondly, $scope.childArr and $scope.test.parentArr both point to the same array. Changing either of them would mean changing both of them.

It is almost same as doing:

$scope.test = {};
$scope.childArr = $scope.test.parentArr = [
    {'name':'peter'},
    {'name':'paul'},
    {'name':'perry'}
];

If you want to create separate copies so that changing one of them would not affect the other, then you can use angular.copy():

$scope.test.parentArr = angular.copy($scope.childArr);
share|improve this answer
    
Thanks, yes my terminology is wrong they are in the same scope and yes i was ignoring JS prototype inheritance with the 2 objects and yes .copy() works perfectly. Thanks for clearing that up –  user1881263 Aug 13 '13 at 11:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.