Angular，模块之间的通信答案

【问题标题】：Angular, communicate between modulesAngular，模块之间的通信
【发布时间】：2016-05-10 07:54:31
【问题描述】：

我的项目有闲置设置：

mainApp 主 Angular 模块，包含 EventBus 工厂
app1 第一个注入 mainApp 的模块
注入 mainApp 的 app2 第二个模块

app1和app2是放在同一个页面的两个模块，都注入了mainApp。

我正在尝试使用在 mainApp 中定义的 EventBus 工厂在 app1 和 app2 之间进行通信。不幸的是，我无法让它工作（app1 没有捕获 app2 事件，反之亦然）。

我应该如何解决这个问题？我是否采取了错误的方法？

EventBus.subscribe("App1Ctr.event", function (event, data) {
    console.log("App2handler");
    $scope.name = data.newVal;
});


$scope.fireEvent = function () {
    EventBus.broadcast("App2Ctr.event", {"newVal": "App2Ctr"});
};

这是plnkr

【问题讨论】：

您能否添加一些细节，例如：1）您的预期输出/行为是什么？ 2) 什么是当前输出/行为？
@KhalidHussain 预期输出：我有几个模块并希望它们都监听从一个主（注入）模块发送的事件。当前输出 - 在 app1 和 app2 中都没有捕获到任何事件
您能否在您的 plnkr 中添加一个 console.log 并打印当前输出？
更新了这个 plunker plnkr.co/edit/ZpdmdOvHve3y0OsF2nON?p=preview 看起来广播已正确启动，但订阅不起作用。
再多一点信息，指定一个console log，其中当前输出错误并提及您的预期输出。如果您edit将所有信息都放入您的问题中会更好。

标签： angularjs events broadcast emit

【解决方案1】：

您需要更改注入依赖项的方式。您的main.js 需要包含以下内容：

var mainApp = angular.module("mainApp", ["app1", "app2"])

您的两个app1.js 和app2.js 可以从mainApp 中删除依赖要求：

var app1 = angular.module("app1", [])

和

var app2 = angular.module("app2", [])

index.html 中的初始化代码变为

<script>
    angular.element(document).ready(function() {
        angular.bootstrap(document, ["mainApp"]);
    });
</script>

您还需要更改对 {{name}} 的引用，以便它们包含一个点（因为整个原型继承都是 angular）。有关$broadcast、$emit、$on 和$rootScope 的更多详细信息，请参阅this plunkr 和this question。

【讨论】：

很遗憾，我不能这样做，因为这会颠倒项目结构。
您的main.js 目前只包含EventBus 的工厂，所以您不妨将其重命名为eventBus.js。另一种方法是让您的app1 和app2 成为共同父级的子级，在子级上使用$scope.$emit，并让父级使用$scope.$broadcast 在层次结构中重新广播事件，如this answer 中所示
该示例适用于不同的控制器，但如何嵌套 Angular 应用程序/模块？
我编辑了this plunkr，向您展示了处理多模块角度应用程序的标准方法（将手动引导部分替换为ng-app）。这就是您通常定义应用程序模块的方式，您将它们列为主模块的依赖项。
Thnks，但正如我所说，我不能那样做，这个项目真的很大并且包含许多角度应用程序，我现在无法恢复所有项目的结构，因为它会打破许多其他功能。还是谢谢。

【解决方案2】：

我设法找到了解决方案。 EventBus 中的广播方法应如下所示：

_broadcast = function(eventName, data) {
    console.log("EventBus broadcast: " + eventName);
    angular.element(document.getElementById('app1')).scope().$root.$emit(eventName, data);
  };

由于它必须通过 ID 获取 Angular 应用程序，我将另外使用 EventDispatcher 来处理。

【讨论】：