How to access parent property using Controller As notation

Question

I'm using the Controller as in my view as follows:

<body ng-controller="MainCtrl as main">
   <div ng-controller="ChildCtrl as child">
      {{ main.parentValue }} + {{ child.childValue }}
   </div>
</body>

Defining my controller like this:

app.controller('MainCtrl', function($scope) {
   this.parentValue = 'Main';
});

app.controller('ChildCtrl', function($scope) {
   this.childValue = 'Child';
   // I want to access the property of the parent controller here
});

How can the ChildCtrl set the name property of the MainCtrl? Here the Plunkr.

Using the $scope notation, I could have accessed $scope.parentValue from the child controller. How can the same functionality be achieved using the Controller As notation?

Upvoting your question ... I think it is a legitimate question, not sure who/why would downvote it. — JME, Oct 10 '14 at 23:35
The question may be basic, but still legitimate. In other scenarios access to a parent scope is relatively straight forward. However, when using "controller as" notation it is not. I thought the purpose of this community was help each other out, regardless of whether or not our questions are considered basic by more experienced developers. Just my two cents. :-) — JME, Oct 10 '14 at 23:49
@bengro Probably you can take a look at this, mostly this might be helpful for you. Just adding a link to another well explained and a better answer for future visitors.. http://stackoverflow.com/questions/21453697/angularjs-access-parent-scope-from-child-controller — PSL, Oct 11 '14 at 00:09

score 20 · Accepted Answer · answered Oct 10 '14 at 23:32

Since your using the "controller as" notation, witin your ChildCtrl you can access the MainCtrl using $scope.main, for example $scope.main.name.

See my snippet below.

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  this.name = 'Main';
  this.test = {};
});

app.controller('ChildCtrl', function($scope) {
  this.name = 'Child';
  alert($scope.main.name);
});

<html ng-app="app">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-controller="MainCtrl as main">
  <div ng-controller="ChildCtrl as child">
    {{ main.name }} + {{ child.name }}
  </div>
</body>

</html>

score 7 · Answer 2 · answered Aug 04 '15 at 14:38

You should not mix up "controller as" and $scope usage. To update data in a parent-scope you could/should use services.

Example: Changing the page-title from within any Child-Controller:

app.service("SiteService", function () {
    return {
        title: "Page title";
    }
}


app.controller ("ParentCtrl", function (SiteService) {
    this.site = SiteService;
}

app.controller ("ChildCtrl", function (SiteService) {
    SiteService.title = "New Title";
}

And your template

<html ng-app="someApp" ng-controller="ParentCtrl as site">
    <head>
         <title>{{site.title}}</title>
    </head>
</html>

The main advantage of this approach: You separate public mutable from private properties.

This is nothing else but fancy looking global variable when question asks about accessing parent controller data. And it will immediately cause trouble if you have more than one pair of ParentCtrl+ChildCtrl instances. — Tadas Sasnauskas, Jan 13 '16 at 13:20

score 0 · Answer 3 · edited Oct 10 '14 at 23:40

0

Putting the data in $scope is the angular way to do this. You could also set/get your data from a service which is then easy to include into either controller.

Check out this video: https://egghead.io/lessons/angularjs-sharing-data-between-controllers

edited Oct 10 '14 at 23:40

PSL

123,204
21
253
243

answered Oct 10 '14 at 23:18

Shan Robertson

2,742
3
25
43

How to access parent property using Controller As notation

3 Answers3

Linked