javascript - Working with $scope.$emit and $scope.$on

Question

How can I send my $scope object from one controller to another using .$emit and .$on methods?

function firstCtrl($scope) {
    $scope.$emit('someEvent', [1,2,3]);
}

function secondCtrl($scope) {
    $scope.$on('someEvent', function(mass) { console.log(mass); });
}

It doesn't work the way I think it should. How do $emit and $on work?

Answer 1

First of all, parent-child scope relation does matter. You have two possibilities to emit some event:

• $broadcast -- dispatches the event downwards to all child scopes,
• $emit -- dispatches the event upwards through the scope hierarchy.

I don't know anything about your controllers (scopes) relation, but there are several options:

1. If scope of firstCtrl is parent of the secondCtrl scope, your code should work by replacing $emit by $broadcast in firstCtrl:

   function firstCtrl($scope)
   {
       $scope.$broadcast('someEvent', [1,2,3]);
   }
   
   function secondCtrl($scope)
   {
       $scope.$on('someEvent', function(event, mass) { console.log(mass); });
   }
   

2. In case there is no parent-child relation between your scopes you can inject $rootScope into the controller and broadcast the event to all child scopes (i.e. also secondCtrl).

   function firstCtrl($rootScope)
   {
       $rootScope.$broadcast('someEvent', [1,2,3]);
   }
   

3. Finally, when you need to dispatch the event from child controller to scopes upwards you can use $scope.$emit. If scope of firstCtrl is parent of the secondCtrl scope:

   function firstCtrl($scope)
   {
       $scope.$on('someEvent', function(event, data) { console.log(data); });
   }
   
   function secondCtrl($scope)
   {
       $scope.$emit('someEvent', [1,2,3]);
   }