Javascript 窗口小部件屏幕上服务/模块之间的通信

我们正在实现一个由多个小部件/模块组成的小部件屏幕：

• 产品：列出产品
• 产品详细信息：一旦“产品”中的选择发生更改，将从服务器加载产品详细信息
• 相关产品：一旦“产品”中的选择更改，将从服务器加载相关产品
• 比较：单击“产品详细信息”中的“比较”后，在服务器上执行一些操作

听起来很简单，对吧？我们的问题是，我们无法找到一个好的解决方案，即组件之间应该如何通信。它们应该尽可能松耦合。所以我不想让“产品”小部件知道“产品详细信息”小部件和“相关产品”小部件存在。也许现在屏幕上甚至没有显示一些小部件（所以那里不会发生任何事情）

我们想到的唯一解决方案是使用$rootScope.$broadcast和$rootScope.$on处理诸如“ProductSelectionChanged”或“CompareClicked”之类的事件

不幸的是，$rootScope.$broadcast似乎会导致性能问题，据我所知： Christoph使用$rootScope.$emit提出的解决方案在IE8中不起作用

我应该只使用$rootScope.$broadcast吗？还是有更好的解决方案

谢谢你的帮助

干杯

---

Michael

我并不认为这是最好的解决方案，但我遇到了组件与

$scope.$broadcast（）

性能问题之间的通信问题。与我的团队一起，我们决定开发一个小型的PubSub服务。它非常简单，可以通过参数快速传递事件

---

如果你想尝试一下，可以在这里找到：

你可以像他们在上面指出的那样使用消息传递，这不是一个坏的解决方案，但如果交流太多，它可能会变得混乱。在本例中，我们将其包装在RequestNotification控件中，并定义一些常量ID（请参见RequestNotificationService）

另一种方法是定义外部指令（例如，包含公共数据或…）并在内部指令中请求它（类似于我们在自定义指令中请求ngmodel时所做的操作）

---

我认为在这里可以找到一个很好的例子：

我认为唯一可行的方法是通过

$broadcast

。原因是你需要以某种方式了解细节……如果没有那种明确的依赖性，我认为没有其他解决方案。