AngularJS: How to pass data between controllers during initialization?

Question

In my AngularJS application, I have one controller that manages the user input (input controller) and broadcasts every significant change to the page content controller (actually the content part is managed by several controllers, but let's keep it simple).

The input controller provides a selection between various elements retrieved from a database, on page initalization I have to load the input controller data and provide a default selection to the content controller so it can show significant data on page load.

Now I'm shooting an event on the input controller initialization ($rootScope.$broadcast('inputSelected', inputData);) but clearly angular is not yet initialized so the content controller doesn't catch the event and doesn't render the actual content page.

I made a JSFiddle to demonstrate the behaviour:

On initialization the first controller is shooting an event to the second one with initial data:

myApp.controller('FirstController', function ($scope, $rootScope) {
  $scope.myInput = 'Initial data';

  $scope.broadcast = function() {
    console.log ('broadcasting: ' + $scope.myInput);
    $rootScope.$broadcast('myEvent', $scope.myInput);
  };

  $scope.broadcast();
});

The second controller is listening for 'myEvent':

myApp.controller('SecondController', function ($scope) {
  $scope.$on('myEvent', function (event, args) {
    console.log ('myEvent catched - Data: ' + args);
    $scope.data = args;
  });
});

When the page loads, the first event is not catched by the second controller and the initial data is not passed, then if you press the button BROADCAST (angular is initialised), everything works fine.

So the final question: What's the best approach to pass data between controllers on initialisation? Is there a way to make sure angular is fully initialised before broadcasting the first event?

basically the listeners is not ready and myEvent broadcast already so first you should emit the event to controller "FirstController" and then broadcast to the "SecondController" then it will work — DK3
– DK3, Commented May 10, 2016 at 8:51

Community · Accepted Answer · 2017-05-23 11:52:37Z

3

Wrapping the $scope.broadcast(); call inside a $scope.$evalAsync works for me:

myApp.controller('FirstController', function ($scope, $rootScope) {
  $scope.myInput = 'Initial data';

  $scope.broadcast = function() {
    console.log ('broadcasting: ' + $scope.myInput);
    $rootScope.$broadcast('myEvent', $scope.myInput);
  };

   $scope.$evalAsync( function() { 
     $scope.broadcast();
   });
});

See: also https://stackoverflow.com/a/23589271/1288109

See the documentation about $evalAsync at: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$evalAsync

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered May 10, 2016 at 8:54

Starnuto di topo

3,6876 gold badges43 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DK3 · Accepted Answer · 2016-05-10 08:58:20Z

1

basically the listeners is not ready and myEvent broadcast already so first you should emit the event to controller "FirstController" and then broadcast to the "SecondController" then it will work.

Here is the fiddle

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

myApp.controller('FirstController', function ($scope, $rootScope) {
$scope.myInput = 'Initial data';

 $scope.broadcast = function() {
  console.log ('broadcasting: ' + $scope.myInput);
  $rootScope.$broadcast('myEvent', $scope.myInput);
 };
 $rootScope.$on("secondready",function(){
  $scope.broadcast();
 });    

});

myApp.controller('SecondController', function ($scope, $rootScope) {
 $scope.$on('myEvent', function (event, args) {
            console.log ('myEvent catched - Data: ' + args);
     $scope.data = args;
 });
 $scope.$emit("secondready");   
});

https://jsfiddle.net/rbdf6xea/

or you can do by setTimeout as well

answered May 10, 2016 at 8:58

DK3

4032 silver badges10 bronze badges

2 Comments

Starnuto di topo Over a year ago

This implies that the first controller must know the event fired by the second, linking the two controllers very tightly

DK3 Over a year ago

yes in that case $timeout will work $timeout(function(){ $scope.broadcast(); },100)

Collectives™ on Stack Overflow

AngularJS: How to pass data between controllers during initialization?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related