AngularJS：在组件之间进行通信的最佳实践是什么？

Question

我有关于组件通信的问题。 我试图推理和失败的主要问题是：我应该使用什么 - $ watch 或 $ on （$ broadcast / $ emit）来建立之间的沟通组件？

我看到三个基本案例：

1. 控制器+指令。它们使用$ scope bidibinding自然地进行通信。我只是使用一些对象（$scope.filter = {}）将服务（包含一些共享状态）放在$ scope中。 这种方法对我来说似乎很合理。

2. 控制器+控制器。我使用DI来注入具有封装状态的单件服务，以便在控制器之间进行通信。这些服务受限于使用先前方法的指令。这为我提供了开箱即用的数据绑定。

3. 指令+指令。这是我推理的盲点。我有指令，它们位于不同的范围内，在相同的范围内，等等。 我的指令必须反映所有必须触发http请求的变化（考虑滑块+图表）和指令（考虑选择输入）。

所以，问题是：

1. 我应该使用什么 - $ watch 或 $ on （$ broadcast / $ emit）来建立组件之间的通信？
2. 我是否倾向于在指令指示通讯中使用 $ watch ？
3. 或者我是否倾向于在指令到指令的情况下使用 $ broadcast ？
4. 使用注入+绑定或注入+事件分享状态会更好吗？

Answer 1

我认为这取决于您的指令/组件的用例。如果您希望能够重新使用组件而无需修改组件所在的范围，那么使用broadcast / emit / on会更有意义。 IMO如果组件内部有一些我希望能够检索并执行不同操作的信息，则广播/发射/开启方案最有意义。

如果另一方面，我需要触发一些服务调用以响应指令中的某些内容，或者我想在几个视图之间共享状态，我最终使用服务。

如注释中所述，另一种替代方法是在指令定义对象中使用require属性：

require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent']

  

require - 需要另一个指令并将其控制器注入   链接函数的第四个参数。需要一个字符串   要传入的指令的名称（或字符串数​​组）。如果是数组   使用时，注入的参数将是一个对应的数组   订购。如果没有找到这样的指令或指令没有   有一个控制器，然后出现错误。名称可以加前缀   用：

• （无前缀） - 在当前元素上找到所需的控制器。
• ？ - 尝试找到所需的控制器，如果未找到则返回null。
• ^ - 通过搜索元素的父项找到所需的控制器。
• ？^ - 尝试通过搜索元素的父元素来找到所需的控制器，如果找不到则返回null。

这在您创建“复合组件”的情况下非常有用，其中多个指令比尝试将所有功能封装到一个指令中更有意义，但您仍需要在“main / wrapping指令”之间进行一些通信“而且是兄弟姐妹/孩子。

我知道这不是一个明确的答案，但我不确定是否有一个。如果我遗漏了一些要点，可以修改编辑/评论。