Geek Answers Handbook

AngularJS: How to transfer data between controllers during initialization?

In my AngularJS application, I have one controller that controls user input ( input controller ) and translates each significant change to the content controller page (in fact, part of the content is controlled by several controllers, but let it simplify).

The input controller provides a choice between the various elements retrieved from the database when the page is initialized. I need to load input controller data and provide a default selection to the content controller so that it can display important data when the page loads .

Now I am shooting an event on the initialization of the input controller ( $rootScope.$broadcast('inputSelected', inputData);), but it is clear that angular is not yet initialized, so the content controller will not catch the event and does not display the actual content page.

I did a JSFiddle to demonstrate the behavior:

Upon initialization, the first controller fires an event in the second with the 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 listens 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 caught by the second controller, and the original data is not transmitted, then if you press the BROADCAST button (angular is initialized), everything will work fine.

, : ? , angular ?

+4
2

$scope.broadcast(); $scope. $evalAsync :

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();
   });
});

: fooobar.com/questions/1640007/...

. $evalAsync : https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$evalAsync

+3

, myEvent , "FirstController", "SecondController", .

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/

setTimeout

0

More articles:


All Articles