27

I guess it is possible to have many angular-modules attached to different regions within one shellpage. But can modules in AngularJS "talk" to each other? If yes, how?

Dánjal Salberg Adlersson
  • 711
  • 1
  • 6
  • 18

3 Answers3

25

There are various ways module can interact or share information

  1. A module can be injected into another module, in which case the container module has access to all elements of the injected module. If you look at angular seed project, modules are created for directive, controllers, filters etc, something like this

    angular.module("myApp", ["myApp.filters", "myApp.services", "myApp.directives", "myApp.controllers"]) This is more of a re usability mechanism rather than communication mechanism.

  2. The second option is as explained by @Eduard would be to use services. Since services are singleton and can be injected into any controller, they can act as a communication mechanism.

  3. As @Eduard again pointed out the third option is to use parent controller using $scope object as it is available to all child controllers.

  4. You can also inject $rootScope into controllers that need to interact and use the $broadcast and $on methods to create a service bus pattern where controllers interact using pub\sub mechanism.

I would lean towards 4th option. See some more details here too What's the correct way to communicate between controllers in AngularJS?

Community
  • 1
  • 1
Chandermani
  • 42,589
  • 12
  • 85
  • 88
  • 1
    I am going to go with the 4th option. Thank you very much. – Dánjal Salberg Adlersson Jun 12 '13 at 09:11
  • I'm a bit confused here (on no. 4 to be more specific). The documentation states that each app has its own `$rootScope`. When you say that the `$rootScope` needs to be injected, do you mean that the `$rootScope` from `firstModule` needs to be injected into the controller of the `secondModule`? – Andrei V Aug 25 '14 at 09:24
  • 2
    app is not module. Generally the is only one app, with multiple modules in it. `$rootscope` is shared across modules in a single app. – Chandermani Aug 25 '14 at 10:06
3

Using the service mechanism to communicate among module's controllers.

 (function () {
        'use strict';

    //adding moduleB as dependency to moduleA

    angular.module('Myapp.moduleA', ['Myapp.moduleB'])
      .controller('FCtrl', FCtrl)
      .service('sharedData', SharedData);

    //adding the dependency shareData to FCtrl

    FCtrl.$inject = ['sharedData'];

    function FCtrl(sharedData) {

      var vm = this;
      vm.data = sharedData.data;
    }


    //shared data service
    function SharedData() {

      this.data = {
        value: 'my shared data'
      }

    }

    //second module
    angular.module('Myapp.moduleB', [])
      .controller('SCtrl', SCtrl);

    SCtrl.$inject = ['sharedData'];

    function SCtrl(sharedData) {

      var vm = this;
      vm.data = sharedData.data;
    }


    })();

And the HTML as follows:

<html ng-app="firstModule">
<body>

  <div ng-controller="FCtrl as xyz">
    <input type=text ng-model="xyz.data.value" />
  </div>

  <div ng-controller="SCtrl as abc">
    <input type=text ng-model="abc.data.value" />
  </div>

</body>
</html>
M Thomas
  • 1,062
  • 1
  • 10
  • 12
0

You can use services and controllers inheritance (explained here http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller)

in any case, you shuold consider not having your controllers tighlty coupled.

Eduard Gamonal
  • 8,023
  • 5
  • 41
  • 46