27

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

4

3 回答 3

25

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

  1. 一个模块可以注入另一个模块，在这种情况下，容器模块可以访问注入模块的所有元素。如果您查看Angular 种子项目，会为指令、控制器、过滤器等创建模块，类似这样

    angular.module("myApp", ["myApp.filters", "myApp.services", "myApp.directives", "myApp.controllers"]) 这更像是一种重用机制而不是通信机制。

  2. 正如@Eduard 所解释的，第二个选项是使用服务。由于服务是单例的并且可以注入到任何控制器中，它们可以充当通信机制。

  3. 正如@Eduard 再次指出的那样，第三个选项是使用 $scope 对象来使用父控制器，因为它对所有子控制器都可用。

  4. 您还可以将 $rootScope 注入需要交互的控制器中，并使用 $broadcast 和 $on 方法来创建服务总线模式，其中控制器使用 pub\sub 机制进行交互。

我会倾向于第四个选项。也可以在此处查看更多详细信息AngularJS 中控制器之间通信的正确方法是什么？

于 2013-06-11T12:51:06.180 回答
3

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

 (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>
于 2016-07-18T10:28:26.377 回答
0

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

在任何情况下，您都应该考虑不要让您的控制器紧密耦合。

于 2013-06-11T12:44:30.010 回答