AngularJS access parent scope from child controller
If your HTML is like below you could do something like this:
<div ng-controller="ParentCtrl"> <div ng-controller="ChildCtrl"> </div></div>
Then you can access the parent scope as follows
function ParentCtrl($scope) { $scope.cities = ["NY", "Amsterdam", "Barcelona"];}function ChildCtrl($scope) { $scope.parentcities = $scope.$parent.cities;}
If you want to access a parent controller from your view you have to do something like this:
<div ng-controller="xyzController as vm"> {{$parent.property}}</div>
See jsFiddle: http://jsfiddle.net/2r728/
Update
Actually since you defined cities
in the parent controller your child controller will inherit all scope variables. So theoritically you don't have to call $parent
. The above example can also be written as follows:
function ParentCtrl($scope) { $scope.cities = ["NY","Amsterdam","Barcelona"];}function ChildCtrl($scope) { $scope.parentCities = $scope.cities;}
The AngularJS docs use this approach, here you can read more about the $scope
.
Another update
I think this is a better answer to the original poster.
HTML
<div ng-app ng-controller="ParentCtrl as pc"> <div ng-controller="ChildCtrl as cc"> <pre>{{cc.parentCities | json}}</pre> <pre>{{pc.cities | json}}</pre> </div></div>
JS
function ParentCtrl() { var vm = this; vm.cities = ["NY", "Amsterdam", "Barcelona"];}function ChildCtrl() { var vm = this; ParentCtrl.apply(vm, arguments); // Inherit parent control vm.parentCities = vm.cities;}
If you use the controller as
method you can also access the parent scope as follows
function ChildCtrl($scope) { var vm = this; vm.parentCities = $scope.pc.cities; // note pc is a reference to the "ParentCtrl as pc"}
As you can see there are many different ways in accessing $scopes
.
Updated fiddle
function ParentCtrl() { var vm = this; vm.cities = ["NY", "Amsterdam", "Barcelona"];} function ChildCtrl($scope) { var vm = this; ParentCtrl.apply(vm, arguments); vm.parentCitiesByScope = $scope.pc.cities; vm.parentCities = vm.cities;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script><div ng-app ng-controller="ParentCtrl as pc"> <div ng-controller="ChildCtrl as cc"> <pre>{{cc.parentCities | json}}</pre> <pre>{{cc.parentCitiesByScope | json }}</pre> <pre>{{pc.cities | json}}</pre> </div></div>
I've just checked
$scope.$parent.someProperty
works for me.
and it will be
{{$parent.someProperty}}
for the view.
When you are using as
syntax, like ParentController as parentCtrl
, to define a controller then to access parent scope variable in child controller use following :
var id = $scope.parentCtrl.id;
Where parentCtrl
is name of parent controller using as
syntax and id
is a variable defined in same controller.