$scope.on not listening to $emit and $broadcast

Question

I'm unable to get the controller to listen to any emit or broadcast messages. I've tried with $rootScope as well but still it is not working.

<div ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
</div>
<div ng-controller="Controller1">
  <p>Hello {{name}}!</p>
</div> 

app.controller('MainCtrl', function($scope) {
  $scope.name = 'SomeName';
  $scope.$broadcast($scope.name, "Hello");
});

app.controller('Controller1', function($scope) {
  $scope.name = 'SomeName';
  $scope.$on($scope.name, function(event,data) {
    console.log("identified"); 
    console.log("data");
  });
});

Demo : http://plnkr.co/edit/E95Ucn5Xa9zauwg4dsIA?p=preview

You could take a look at creating a pub/sub service of your own as well in order to avoid injecting rootScope in many places. You can find a [similar implementation here](http://stackoverflow.com/questions/25274563/angularjs-communication-between-directives/25274665#25274665). — PSL, Jan 02 '15 at 15:15

dfsq · Answer 1 · 2015-01-02T09:59:23.510

First of all since $broadcast sends event downwards to child scopes, you need to nest Controller1 under MainCtrl for your approach to work.

<div ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <div ng-controller="Controller1">
        <p>Hello {{name}}!</p>
    </div>
</div>

The second nuance is that you are trying to broadcast event right away in MainCtrl controller, however at this time $scope.$on is not yet registered in Controller1, so dispatching event in this manner makes little sense as there is nothing to handle it yet. But for the sake of demonstration, if you broadcast event after some timeout or on ngClick, you will see that it works properly.

Demo: http://plnkr.co/edit/wo1IHggq9CiDHPVcgB4C?p=info

score 1 · Accepted Answer · answered Jan 02 '15 at 10:04

Option B

If you want to broadcast event between siblings controllers you can use $rootScope and the rest like in @dfsq answer

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

app.controller('MainCtrl', function($scope, $rootScope, $timeout) {
  $scope.name = 'SomeName';
  $timeout(function() {
    $rootScope.$broadcast($scope.name, "Hello");
  }, 1);
});

app.controller('Controller1', function($scope) {
  $scope.name = 'SomeName';
  $scope.$on($scope.name, function(event, data) {
    console.log("identified");
    console.log("data");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<body ng-app="plunker">
  <div ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
  </div>
  <div ng-controller="Controller1">
    <p>Hello {{name}}!</p>
  </div>
</body>

score 0 · Answer 3 · answered Jan 02 '15 at 10:05

It needs Parent-> Child or Child-> Parent relationship but you are creating two isolated Divs.

Nest one with another then it will work.

<div ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <div ng-controller="Controller1">
    <p>Hello {{name}}!</p>
  </div>
</div>

Here MainCntrl will be Parent of Controller1

Or

<div ng-controller="Controller1">
      <p>Hello {{name}}!</p>
      <div ng-controller="MainCtrl">
        <p>Hello {{name}}!</p>
      </div>
    </div>

Here Controller1 will be Parent controller of MainCntrl

$scope.on not listening to $emit and $broadcast

3 Answers3

Demo: http://plnkr.co/edit/wo1IHggq9CiDHPVcgB4C?p=info