CODEWITHSUNDEEP
javascriptangularjs
Tushara
Tushara

Reputation: 33

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

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

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

Upvotes: 0

Views: 74

Answers (2)

lin
lin

Reputation: 18392

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

Upvotes: 1

Pierre Mallet
Pierre Mallet

Reputation: 7221

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

Upvotes: 0

Related Questions