Function not called from 1 controller to another with $emit or $broadcast

Question

First think i am new at angular. I am trying to call 1 function from 1 controller to another.

With ng-click=mapUsers1() event its giving 2 alert but
without ng-click=mapUsers1() it giving only 1 pop

Is this feature of angular or i am doing something wrong......?

1.This is with $emit

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp">

  <script>
    var app = angular.module('myApp', []);

    app.controller('myCtrl2', function($scope, $rootScope) {

      $rootScope.$on("call_mapUsers_Method", function() {
        $scope.mapUsers();
      })

      $scope.mapUsers = function() {
        alert("done....");
      }
    });

    app.controller('myCtrl1', function($scope, $rootScope) {
      $scope.mapUsers1 = function() {
        alert('test');
        $rootScope.$emit("call_mapUsers_Method", {});
      }
      $scope.mapUsers1();
    });
  </script>

  <div ng-controller="myCtrl1">
    <button ng-click="mapUsers1()">click</button>
    <div ng-controller="myCtrl2"></div>
  </div>


</body>

</html>

1.This is with $broadcast

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp">

  <script>
    var app = angular.module('myApp', []);

    app.controller('myCtrl2', function($scope, $rootScope) {

      $rootScope.$on("call_mapUsers_Method", function() {
        $scope.mapUsers();
      })

      $scope.mapUsers = function() {
        alert("done....");
      }
    });

    app.controller('myCtrl1', function($scope, $rootScope) {
      $scope.mapUsers1 = function() {
        alert('test');
        $rootScope.$broadcast("call_mapUsers_Method", {});
      }
      $scope.mapUsers1();
    });
  </script>

  <div ng-controller="myCtrl1">
    <button ng-click="mapUsers1()">click</button>
    <div ng-controller="myCtrl2"></div>
  </div>


</body>

</html>

Edit: I have added example with $emit And $broadcast. with loading it will give only 1 alert but with button click it will give 2 alert ,that is seem odd

Downvoter, You are free to suggest any modifications....! – Tushara Feb 22 '18 at 14:41 — Tushara, Feb 22 '18 at 14:41

score 1 · Accepted Answer · answered Feb 22 '18 at 15:00

Your child controller myCtrl2 isn't initialized when you fire $scope.mapUser1() on your parent myCtrl1 controller init. That's why your child controller $rootScope.$on() is not listening in that moment. You need to trigger a new diggest cycle e.g. by using $timeout:

In my opinion you should use a factory or service to communitcate between different controllers. This answer will help you: Share data between AngularJS controllers.

> Demo fiddle

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

app.controller('myCtrl2', function($scope, $rootScope) {

  $rootScope.$on("call_mapUsers_Method", function() {
    $scope.mapUsers();
  });

  $scope.mapUsers = function() {
    alert("done....");
  }
});

app.controller('myCtrl1', function($scope, $rootScope, $timeout) {
  $scope.mapUsers1 = function() {
    alert('test');
    $rootScope.$broadcast("call_mapUsers_Method", {});
  }

  $timeout(function() {
    $scope.mapUsers1();
  });
});

Thanks lin, your answer is very useful, but currently i am not able to upvote your answer. — Tushara, Feb 23 '18 at 05:31

score 0 · Answer 2 · answered Feb 22 '18 at 14:43

You cant this way. The $emit function will make an event "bubble up" from scope emitting to rootScope.

$emit(name, args); => Dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners. from doc

So your event is not descending from myCtrl1 to myCtrl2

To send a event downward your need to use $broadcast

$broadcast(name, args); => Dispatches an event name downwards to all child scopes (and their children) notifying the registered $rootScope.Scope listeners. (same docs)

So do this :

app.controller('myCtrl1', function($scope, $rootScope) {
    $scope.mapUsers1 = function() {
        alert('test');
        $rootScope.$broadcast("call_mapUsers_Method", {});
    }

    $scope.mapUsers1();
});

,1st thanks for your response, i have added both scenario with `$emit` and `$broadcast `. my aim is to show 2 popup without button click. — Tushara, Feb 22 '18 at 14:55
i think lin gave you the good answer. You need to delay the broadcasting of the event until your second controller is initialized. Btw lin is right when telling your should use service to share data in your case. AngularJS events should be a last resort saviour :D — Pierre Mallet, Feb 22 '18 at 16:28

Function not called from 1 controller to another with $emit or $broadcast

2 Answers2