How to access Child Controller Scope in Parent Controller in Angular?

Question

I am learning Angular JS and I have something like this with a parent controller and child controller:

<div ng-controller="MainCtrl">
    <p>Good {{question}}</p>

    <div ng-controller="ChildCtrl">
        <p>Good {{answer}}!</p>
    </div>

    Bind the Child Controller's scope and show here: {{ answer}}
<div>

Here the child controller is using the scope like this:

$scope.answer = response.answer;

How do I show the {{ answer }} outside the child controller and inside the parent controller?

IvanZh · Accepted Answer · 2014-03-15 20:41:09Z

You can also use scope prototypal inheritance.

In AngularJS, a child scope normally prototypically inherits from its parent scope. But the answer is a primitive (not object type). So we should put our text data to object, to ensure that prototypal inheritance is in play.
(More info here: https://github.com/angular/angular.js/wiki/Understanding-Scopes)

Controllers:

function MainCtrl($scope) {
  $scope.question = 'question';
  $scope.answer = {};
}
function ChildCtrl($scope) {
  $scope.answer.text = 'demo'; 
}

View:

<div ng-controller="MainCtrl">
  <p>Good {{question}}</p>
  <div ng-controller="ChildCtrl">
    <p>Good {{answer.text}}!</p>
  </div>
  Bind the Child Controller's scope and show here: {{ answer.text}}
<div>

That is so simple and easy! I find this method better than $emit and $on. Thanks heaps @IvanZh

Minko Gechev · Accepted Answer · 2014-03-15 20:08:38Z

13

Use the publish/subscribe pattern:

function MainCtrl($scope) {
  $scope.question = 'question'
  $scope.$on('response', function (evnt, data) {
    $scope.answer = data;
  });
}

function ChildCtrl($scope) {
  $scope.$emit('response', 'demo');
}

Demo here.

edited Mar 15, 2014 at 20:08

answered Mar 15, 2014 at 18:25

Minko Gechev

25.8k9 gold badges64 silver badges69 bronze badges

4 Comments

Neel Over a year ago

Thanks Minko. I looked at the demo. Should the {{ answer}} in the parent controller should show demo if its binded with the a {{ answer }} in the child controller?

Minko Gechev Over a year ago

Actually there is a mistake. It should be fixed now.

Neel Over a year ago

Just one small question. does the evnt in $scope.$on('response', function (evnt, data) has to be event or it doesnt matter and it can hold any string. (sorry if this sounds silly)

Gourav Garg Over a year ago

@Neel, it doesn't matter and you can use any string, sometime we use 'e'

Collectives™ on Stack Overflow

How to access Child Controller Scope in Parent Controller in Angular?

2 Answers 2

1 Comment

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Related