Question

我想可以在一个shellpage中将许多角度模块连接到不同的区域。但是AngularJS中的模块可以“互相交谈”吗？如果是，怎么样？

Answer 1

模块可以通过多种方式进行交互或共享信息

可以将模块注入另一个模块，在这种情况下，容器模块可以访问注入模块的所有元素。如果你看一下angular seed项目，就会为指令，控制器，过滤器等创建模块，就像这样

angular.module（“myApp”，[“myApp.filters”，“myApp.services”，“myApp.directives”，“myApp.controllers”]）这更像是一种可用性机制，而不是通信机制。
第二个选项是由@Eduard解释的将使用服务。由于服务是单一的并且可以注入到任何控制器中，因此它们可以充当通信机制。
由于@Eduard再次指出第三个选项是使用$ scope对象的父控制器，因为它可供所有子控制器使用。
您还可以将$ rootScope注入需要交互的控制器，并使用$ broadcast和$ on方法创建服务总线模式，其中控制器使用pub \ sub机制进行交互。

我倾向于第四种选择。请在此处查看更多详细信息What's the correct way to communicate between controllers in AngularJS?

Answer 2

使用服务机制在模块的控制器之间进行通信。

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


    })();

HTML如下：

<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>

Answer 3

您可以使用services和控制器继承（在此处解释http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller）

无论如何，你应该考虑不要让你的控制器紧密耦合。

AngularJS中模块之间的通信

3 个答案: