javascript - 多层嵌套指令之间的通信

Question

这有点复杂，所以请耐心等待。我有三层指令:

1. 顶层 - 弹出指令
2. 中间层 - a switch-pane指令*
3. 底层 - 多个 View 之一

顶层只是一些弹出窗口，代表我的应用程序中的向导。中间层是我制定的指令，充当 View 堆栈 - 您可以“推送”和“弹出” View 。显示“俯视” View ，其余 View 被推到一边并变得模糊。最底层是一堆平时互不相关的 View ，动态加载并显示在 switch-pane 中。根据用户的行为。

到目前为止，这是可行的，但是:目前，顶层的 $scope有一个数组属性，表示 switch-pane 的所有 View 应该显示，传递给switch-pane指令作为属性，而 switch-pane指令$watch es 它并 self 更新。这没问题，但我认为还不够好 - 我想要 switch-pane指令本身来管理它的 View 堆栈，并且只公开 push和pop API。

以下是我想到的几种方法:

• 使用$broadcast/$emit - 顶层将$广播“推送”事件和 switch-pane会捕获它并做它需要做的任何事情
• 使用服务(订阅并触发“推送”事件 - 这就像使用 $broadcast 但不会在整个范围树中传播
• 使用允许 switch-pane 的服务指令来注册它自己的 API。使用某种识别方式，例如属性甚至元素 ID
• 使用angular.element().scope()访问 switch-pane的内部运作

坦白说，我不太喜欢这些方法。当然，我想避免与 DOM 绑定(bind)，所以最后两个是最糟糕的。

还有其他方法可以做到这一点吗？考虑到除了通过 DOM 之外我们实际上无法访问指令的特定实例，哪种方式是公开指令 API 的最 Angular 方式？

Answer 1

你可以检查如何 ng-form , ng-model和ng-input已实现。基本上，如果表单有一个名称，例如 <form name="foo" ...>其 Controller 发布到当前范围，在本例中位于$scope.foo下多变的。 Controller 发布后，您可以在 ng-form 之外使用其 API指令。

如果require: "^ngForm"，您还可以从其他指令访问此 Controller 已指定选项。

这是取 self 的项目的示例。它是一种用 jQuery 编写的 jqGrid 网格插件的包装器:https://github.com/9ci/angle-grinder/blob/06856b0d940b572960025f06f470c2f40fdc0ceb/app/scripts/modules/gridz.coffee#L12