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

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

Answer 2

你可以像他们指出的那样使用消息传递，这不是一个糟糕的解决方案，但如果有太多的沟通，它可能会变得混乱。在我们的例子中，我们将它包装在RequestNotification控件中并定义一些const ID（参见RequestNotificatinService）

http://lemoncode.net/2013/07/31/angularjs-found-great-solution-to-display-ajax-spinner-loading-widget/

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

我认为这里有一个关于如何找到这项工作的好样本：http://jaysoo.ca/2014/01/20/semantic-angularjs-directives/