Communication between modules in AngularJS

后端未结

关注

 3  1270

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?

相关标签:

3条回答

遥遥无期

2020-12-23 23:47

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>

0 讨论(0)

灰色年华

2020-12-23 23:47

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
生来不讨喜

2020-12-23 23:50
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?
0 讨论(0)
发布评论:

提交评论
- 加载中...