Angularjs:查找指令的所有实例

Question

我正在尝试创建一个指令,允许用户使用箭头键逐页导航页面.但是我也希望能够将这些部分分散在dom周围,并且在添加和删除内容时不要破坏它们.我可以想到几种方法,但没有一种方法令人满意:

• 使用控制器创建一个指令,该控制器允许其他指令自行注册(并在$ destroy上取消注册).但如果我稍后在中间添加一些东西,这将会失灵.此外,我尝试过这种方式编写它,似乎代码的方式多于必要的代码.

• 每当用户点击一个箭头键,创建一个空数组,并广播一个事件,并通过回调指令在该列表上注册自己.然后,一旦该列表已满,则前进或后退.他们(应该？)按照他们在DOM上的顺序回来,但我不确定,因为这种方式似乎疯狂和hackish.

• 使用css标记"tabbable"的内容,并在jquery中以简单的方式编写这样的内容,例如:在新的click事件中,var all = $('.tabbable')然后用它做明显的事情.但我真的不想那样做,因为它不是'有角度'的方式.不是出于某种纯洁感,而是因为我将它构建为更大的小部件库的一部分,我希望这个功能可以访问它们.

那么,有没有办法让我获得某种类型的所有指令的范围,而不是诉诸于奇怪的黑客,或者将逻辑分散到各处？

Answer 1

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

首先,按类型查找所有指令或节点违反Angular方式.View是AngularJS中的官方记录,因此指令应该说出他们做了什么,做了他们说的话.在某处编写某个进程以扫描DOM节点并相应地执行操作是有问题的,原因有几个,其中最重要的是关注点和可测试性的分离.

我很高兴看到你正在考虑其他选项,但我同意你提供的其他选项因你提到的原因而不是最佳选择.但我还有一个.这是我用于不同应用程序的那个,但需要分散DOM节点的知识.

首先,我们创建一个服务来管理该组件的状态.这很简单.我们称之为SectionsService.接下来,我们创建一个注册节的指令.让我们称之为section简单.该section指令SectionsService在其链接阶段注册DOM节点的ID(可能以编程方式创建以确保唯一性).由于DOM(大部分)按顺序处理,因此添加到SectionsService遗嘱中的节点也是有序的.所以DOM看起来像这样(省略了无关的东西):

<div section>...</div>

<!-- other stuff -->

<div section>...</div>

<!-- other stuff -->

<!-- etc. -->

(虽然这里的范围超出范围,但是以这样的方式对它进行编程并不是很困难,以至于订单无关紧要,但它是基于我不知道的应用程序的细节.)

接下来,您将创建触发器,如箭头键处理程序.在这些事件上,您只需告诉它SectionService转到列表中的上一个/下一个节点.AngularJS附带了一个名为的服务$anchorScroll,可用于模拟我们熟悉的浏览器基于散列的定位.如果你愿意,你显然也可以使用jQuery插件来动画滚动.

就是这样!一个非常简单的指令,一个相当简单的服务,以及您需要的任何触发器.总而言之,我猜不到100行代码,包括测试.所有组件都是分离的,易于测试,但仍然非常简单.观点仍然是真相.Angular Way保留下来.

有很多的欣喜.

我希望这会让你朝着正确的方向前进,但当然可以随意提出一个后续问题.如果您愿意,我们也可以谈论代码细节; 正如我所说,他们不会很复杂.

Answer 2

AngularJS 服务是单例的，可以通过依赖注入来获取。您可以让指令需要状态管理器服务并调用增量器/减量器。

或者，更简单但更脆弱的是，您可以在 $rootScope 中保留一个数组。它比 jquery 全局选择器更惯用的“角度”（但不是很多），但如果您正在构建一个小部件库，可能不是最好的路线。