How to communicate between controllers of two different modules in AngularJs

Question

I want to know that can we communicate between two different controllers in AngularJS. Suppose I have Two modules,
Plunker: http://plnkr.co/edit/if0MQwlx9WHrD8XnMi2t?p=preview

    1. var app = angular.module('fistModule', []);
           app.controller('first', function ($scope) {
                $scope.firstMethod= function () {
                 //my code}
} )
    2. var newapp = angular.module('secondModule,[]');
           newapp.controller('second', function ($scope) {
              $scope.secondMethod= function () {
               //my code}

Is there way to communicate between controllers of two different modules.

My Code: JS:

angular.module('myApp', [])
  .controller('ParentCtrl', ['$scope',
    function($scope) {

      $scope.message = "Child updated from parent controller";

      $scope.clickFunction = function() {
        $scope.$broadcast('update_parent_controller', $scope.message);
      };
    }
  ]);
  angular.module('myNewApp', [])
  .controller('ChildCtrl', ['$scope',
    function($scope) {
      $scope.message = "Some text in child controller";

      $scope.$on("update_parent_controller", function(event, message) {
        $scope.message = message;
      });
    }
  ])

HTML:

<div ng-app="myApp" ng-controller="ParentCtrl">

    <div ng-app="myNewApp" ng-controller="ChildCtrl">
      <p>{{message}}</p>
    </div>

    <button ng-click="clickFunction()">Click</button>
  </div>

Whether they're in the same module or not doesn't change anything. — JB Nizet, Dec 31 '14 at 11:50
this mean I can communicate between controllers using $broadcast. — ng_developer, Dec 31 '14 at 11:53
How about you doing that, and asking a question if you don't succeed? — JB Nizet, Dec 31 '14 at 11:54
I am getting an error when I am using $broadcast to pass the data. — ng_developer, Dec 31 '14 at 11:56
same code is working fine if, both controllers are in same module.. — ng_developer, Dec 31 '14 at 11:56
Then post the complete code, the stack trace of the error, and create a plunkr that reproduces the problem. — JB Nizet, Dec 31 '14 at 11:58
Communication between controllers using broadcast/emit is considered a bad practice. You should be using services. As well, using parent-child scopes to communicate brings strong-coupling between controllers and is very error prone. Use services for communication between controllers. — Martin, Dec 31 '14 at 12:33

Martin · Answer 1 · 2014-12-31T12:37:17.667

As @JB Nizet says, you do it the exact same way. You use a service to communicate between two controllers.

One module needs to have the other module as a dependency. This is always a one-way dependency. I have made secondModule a dependency of firstModule.

As well, the value in the service is stored in an object called data. This is because JavaScript does not pass values by reference -- but does pass objects by reference. So this is a form of boxing.

angular.module('firstModule', ['secondModule'])
  .controller('FirstController', FirstController)
  .service('sharedData', SharedData);

FirstController.$inject = ['sharedData'];
function FirstController(sharedData) {
  
  this.data = sharedData.data;
}

function SharedData() {

  this.data = {
    value: 'default value'
  }

}

angular.module('secondModule', [])
  .controller('SecondController', SecondController);

SecondController.$inject = ['sharedData'];
function SecondController(sharedData) {
  
  this.data = sharedData.data;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="firstModule">

  <div ng-controller="FirstController as vm">
    First Controller in module firstModule<br>
    <input type=text ng-model="vm.data.value" />
  </div>

  <div ng-controller="SecondController as vm">
    Second Controller in module secondModule<br>
    {{vm.data.value}}
  </div>
</div>

score 2 · Answer 2 · answered Dec 31 '14 at 12:21

2

your plunker has a very minor issue.

change this

     angular.module('myApp', [])

to

     angular.module('myApp', ['myNewApp'])

answered Dec 31 '14 at 12:21

harishr

17,807
9
78
125

1

It has another issue: it tries using ngApp twice. @ng_developer: read the documentation of ngApp: *Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application*. – JB Nizet Dec 31 '14 at 12:26

How to communicate between controllers of two different modules in AngularJs

2 Answers2

Linked