CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
Laxmikant Dange
Laxmikant Dange

Reputation: 7688

Accessing parent scope value with standard method

Today I wondered after some strange behavior of angularjs. I used console.log to log $scope, there were no key attached to scope named val1, but when I use console.log($scope.val1) its returning value as a object. After digging out the reason, I found that it was accessing parent scope as there is no kay named val1 in $scope. Now my question is that,

Which is good practice? Can you please justify?

  1. Using $scope.$parent.val1
  2. Using $scope.val1

Upvotes: 2

Views: 122

Answers (2)

Oleg Belousov
Oleg Belousov

Reputation: 10121

It depends on the type of val1, in case it is a primitive, you will have to access it explicitly via $scope.$parent. In case it is an object, you can take advantage of the prototypal inheritance that exists between parent and child scope in Angular and just reference it regularly, as I am sure you are aware of, objects are passed by reference, so any change to the object will change it on the parent scope.

More info here

Upvotes: 1

Anders Ekdahl
Anders Ekdahl

Reputation: 22943

You should generally never use $scope.$parent and instead rely on Javascripts prototypal inheritance. By accessing the parent directly, you run the risk of the code breaking if you move the directive/controller a step up in the scope hierarchy, and the data is now on $scope.$parent.$parent instead.

Instead, never write to properties directly on the scope but to objects on the scope object instead.

Say you do:

$scope.$parent.value = 'x';

Then you do:

console.log($scope.value);

That'll print x to the console. If you then do:

$scope.value = 'y';

You're not modifying the value property on the parent scope, but introducing a new property on the child scope. So $scope.$parent.value will still contain x.

To get around that, you do:

$scope.$parent.data = {value: 'x'};
console.log($scope.data.value); // prints x
$scope.data.value = 'y';
console.log($scope.data.value); // prints y
console.log($scope.$parent.data.value); // also prints y

The reason this works is that instead of creating a new value property on the child scope, it first needs to lookup the data property. And that's not on the child scope, so it goes up the prototype chain ($parent) to find the data object. The data object is found on the parent, and the value property is set on that object instead.

Upvotes: 4

Related Questions