Angularjs：查找指令的所有实例

Question

我正在尝试创建一个指令，允许用户使用箭头键逐节浏览页面。但我也希望能够将这些部分分散在dom中，并且在添加和删除东西时不会中断这些部分。我能想到的几种方法可以做到这一点，但他们都不是令人满意的：

• 创建一个控制器，让其他指令自己注册一个指令（和注销在$销毁）。但是如果我稍后在中间添加一些内容，这将会失灵。另外，我试过用这种方式写它，而且看起来好像没有必要的代码。

• 每当用户敲击箭头键时，创建一个空数组，然后$广播一个事件，用回调指令在该列表上注册自己。然后，一旦这个列表已满，向前或向后退出。他们（应该？）按照他们在DOM中的顺序回来，但我不确定，因为这种方式看起来很疯狂和骇人听闻。

• 用css标记'tabbable'的东西，然后用jquery写这个简单的方法，就像这样：在一个新的点击事件中，var all = $('.tabbable')，然后做那个很明显。但我真的不想这样做，因为它不是'有角度'的方式。不是出于某种纯粹的感觉，而是因为我将它作为一个更大的小部件库的一部分来构建，并且我希望这个功能可以被他们接受。

那么，有没有什么办法，我让某一类型的所有指令的范围，而不诉诸怪异的黑客，或者所有的地方出蔓延的逻辑是什么？

Answer 1

AngularJS services是单例，可以通过依赖注入来要求。你可以让你的指令需要一个状态管理器服务并调用增量/减法器。

或者，稍微简单一点，但更脆弱，你可以在$ rootScope中保存一个数组。它比jquery selector全局更具惯用的“角度”（但不是太多），但如果你正在构建一个widget库，可能不是最好的路线。

Answer 2

这是一个很好的问题。 +1

首先，按类型查找所有指令或节点都违反了Angular方式。 View是AngularJS的官方记录，因此指令应该说明他们做了什么并且做他们所说的话。在某处编写某个过程来扫描DOM节点并采取相应措施有几个原因是有问题的，其中最重要的是关注点和可测试性的分离。

我很高兴看到您正在查看其他选项，但我同意您提供的其他选项对于您提到的原因而言是次优的。但我还有一个。这是我用于不同的应用程序，但这需要分散DOM节点的知识。

首先，我们创建一个服务来管理这个组件的状态。这很简单。我们称之为SectionsService。接下来，我们创建一个注册章节的指令。为了简单起见，我们称之为section。 section指令在其链接阶段注册DOM节点的ID（可能以编程方式创建，以确保唯一性），SectionsService。由于DOM按顺序处理（大部分），所以添加到SectionsService的节点也将按顺序排列。因此，DOM看起来是这样的（忽略不相关的东西）：

<div section>...</div> 

<!-- other stuff --> 

<div section>...</div> 

<!-- other stuff --> 

<!-- etc. --> 

（虽然在这里的范围，它不会是很难给它以这样一种方式，订单不会有问题程序，但它'd基于你的应用程序的细节，我不知道。）

接下来，你创建你的触发器，就像一个箭头键处理程序。在这些事件中，您只需指示SectionService转到列表中的上一个/下一个节点。 AngularJS带有一个名为$anchorScroll的服务，可用于模拟我们熟悉的基于哈希的浏览器定位。如果你愿意，你显然也可以使用jQuery插件为滚动设置动画。

就是这样！一个非常简单的指令，一个相当简单的服务，以及你需要的任何触发器。总而言之，我猜测不到100行代码，包括测试。所有组件都是分离的，并且易于测试，但仍然非常简单。这个观点仍然是真理。角度的方式被保留。

而且有很多欢乐。

---

我希望这可以让你朝着正确的方向发展，但当然可以随时提出后续问题。如果你愿意，我们也可以谈论代码细节;正如我所说，他们不会很复杂。