1

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

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

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

到目前为止，这是可行的，但是：目前，顶层$scope有一个数组属性，该属性表示应显示的所有视图，作为属性switch-pane传递给指令，指令对其进行自我更新。这没关系，但我认为这还不够好 - 我希望指令本身来管理它的视图堆栈，并且只公开一个和API。switch-paneswitch-pane$watchswitch-panepushpop

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

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

坦率地说，我不太喜欢这些方法。当然我想避免被绑定到 DOM，所以最后两个是最糟糕的。

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

4

1 回答 1

0

您可以检查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

于 2013-09-29T11:43:03.537 回答