在多层嵌套指令之间进行通信

Question

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

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

顶层只是一些代表我的应用中的向导的弹出窗口。 中间层是我所做的一个指令，它充当一堆视图 - 你可以“推”和“弹出”视图。显示“顶部”视图，其余部分被推到一边并模糊。 底层是一堆通常彼此无关的视图，它们根据用户的操作动态加载并显示在switch-pane中。

到目前为止，这是可行的，但是：目前，顶层的$scope有一个数组属性，表示switch-pane应该显示的所有视图，作为一个传递给switch-pane指令属性和switch-pane指令$watch es并更新自身。 这没关系，但我认为它不够好 - 我希望switch-pane指令本身能够管理它的视图堆栈，并且只展示push和pop API。 / p>

以下是我想到的几种方式：

• 使用$broadcast / $emit - 顶层将广播一个“推送”事件，而switch-pane将抓住它并做任何需要的事情
• 使用服务（订阅并触发“推送”事件 - 这就像使用$broadcast但不会在整个范围树中传播
• 使用允许switch-pane指令注册自己的API的服务。使用某种方式识别它，例如属性或甚至元素ID
• 使用angular.element().scope()访问switch-pane的内部工作
坦率地说，我不喜欢这些方法中的任何一种。当然我想避免被绑在DOM上，所以最后2个是最差的。

还有其他方法吗？考虑到除了通过DOM之外，我们实际上无法访问指令的某个实例，这是Angular-ish最常用的方式来公开指令的API？

Answer 1

您可以查看ng-form，ng-model和ng-input的实施方式。基本上，如果表单具有名称，例如<form name="foo" ...>，则其控制器将发布到当前作用域，在本例中为$scope.foo变量。发布控制器后，您可以在ng-form指令之外使用其API。

如果指定了require: "^ngForm"选项，您也可以从其他指令访问此控制器。

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