javascript - 小部件屏幕上的服务/模块之间的通信

Question

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

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

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

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

不幸的是，据我了解，$rootScope.$broadcast 似乎会导致性能问题: What's the correct way to communicate between controllers in AngularJS?并且 Christoph 使用 $rootScope.$emit 提出的解决方案在 IE8 中不起作用。

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

感谢您的帮助!

干杯迈克尔

Answer 1

我并不声称这是最好的解决方案，但我遇到了组件之间的相同通信问题和 $scope.$broadcast() 性能问题。我们决定与我的团队一起开发一个小型的 PubSub 服务。它非常简单，可以通过参数快速传达事件。

如果您想尝试一下，可以在这里找到:angular-pubsub