AngularJS : access scope object from parent to child

Question

Query : Want to access the Main Controller scope object into ui-view states.

Problem Statement :

Here, I am creating one scope object($scope.myVar) based on the response getting from the API that will be applicable across the application. hence, I wrote an API in Main Controller to create this scope object as it is a parent controller and all other states(ui-view) are child.

Here, I want to access that $scope.myVar in all the states in ui-view.

Tried so far : HTML

<body ng-controller="MainController">
  <div class="className">
    <ui-view></ui-view>
  </div>
</body>

Main Controller

app.controller('MainController', function($scope, $http) {

$http({
  method: 'GET',
  url: '/someUrl'
  }).then(function successCallback(response) {
    $scope.myVar = 'xyz'; // This variable i want to access into the state controller.
  }, function errorCallback(response) {        
  });
});

State controller :

app.controller('StateController', function($scope, $timeout) {

  console.log($scope.myVar); // undefined (Not working)

  $timeout(function() {
    console.log($scope.myVar); // xyz (working)
  }, 500);
});

I want to access $scope.myVar without using $timeout service. What is the correct way to do this ?

You can use services if you want to share data between controllers. — Nitesh Rana
– Nitesh Rana, Commented May 12, 2017 at 7:06
@NiteshRana As i already have the data in mainController and other controllers are child so need to use services in that case and $broadcast is used if we want to capture an event from parent to child but in my case i just want to pass the scope variable. — Rohìt Jíndal
– Rohìt Jíndal, Commented May 12, 2017 at 7:29
Okay, you should use dot(.) notation for your variable and should not put it on $scope. See this egghead.io/lessons/angularjs-the-dot — Nitesh Rana
– Nitesh Rana, Commented May 12, 2017 at 11:28

S B · Accepted Answer · 2017-05-16 11:34:01Z

You can use angular $q service

Using promises and $q to handle asynchronous calls

var app = angular.module("MY_APP", []);
//Parent Controller
app.controller("MyCtrl1", [
    '$scope','$q','$timeout', function($scope,$q,$timeout) {

 $scope.async = function(name) {
  var deferred = $q.defer();
  //Async call: Use your ajax call here instead of $timeout
  /*
  $http.get('/someUrl')
       .success(function(data) { 
          $scope.myVar = 'xyz';
          deferred.resolve(data);
       }).error(function(msg, code) {
          deferred.reject(msg);
          $log.error(msg, code);
       });
  */
  $timeout(function() {
    deferred.notify('About to greet ' + name + '.');
     if (name) {
      deferred.resolve('Hello, ' + name + '!');
     } else {
      deferred.reject('Greeting ' + name + ' is not allowed.');
     }
   }, 1000);
  return deferred.promise;
}
}]);
//Child Controller
app.controller("MyCtrl2", [
    '$scope','$q', function($scope,$q) {
 // call parent async method
var promise = $scope.$parent.async('Sai');
promise.then(function(greeting) {
//check your variable here
/*
console.log($scope.$parent.myVar); 
*/
  alert('Success: ' + greeting);
}, function(reason) {
  alert('Failed: ' + reason);
}, function(update) {
  alert('Got notification: ' + update);
});

}]);

Fiddle example

Community · Accepted Answer · 2017-05-23 12:26:25Z

1

you can use $parent.myVar to access data of parentScope

For your situation(async call), you can add $scope.$watch to watch the parent scope variable.

$scope.$watch("$parent.myVar", function(newValue, oldValue) {
  $scope.data = newValue;
)

Here you want to get data immediately when child state initializing, you can try with resolve.

$stateProvider.state({
  name: 'hello',
  url: '/hello',
  templateUrl: '...',
  resolve: {
    testData: function($http) {
      // invoke your async call here again
    }
  }
})

here are some issues about resolve which may help.

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered May 12, 2017 at 7:09

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

14 Comments

Rohìt Jíndal Over a year ago

Not working..getting Unknown provider: $parentProvider <- $parent <- homeController error. I already injected $parent in the controller.

Pengyy Over a year ago

@RohitJindal you don't have to inject $parent. use it directly.

Rohìt Jíndal Over a year ago

I also checked with $scope.$watch it return me undefined if i am accessing the $scope.data outside of $scope.$watch.

Pengyy Over a year ago

@RohitJindal that is because you are fetching data with asynchorouse call, the data won't comeback immediately.

Rohìt Jíndal Over a year ago

I agree with you but I want the solution for this issue.

|

Collectives™ on Stack Overflow

AngularJS : access scope object from parent to child

2 Answers 2

Comments

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related