AngularJS 服务中的 DOM 操作

Question

众所周知，在使用 AngularJS 时，您必须在指令中操作 DOM 元素。

但是，在某些用例中，在服务内部操作 DOM 似乎是可以接受的。
Misko Hevery 正在谈论这个 here .您还可以在 Bootstrap UI Dialog 中找到示例。 .

Misko 的解释相当含糊，所以我想知道您如何确定何时需要将 DOM 放入服务而不是指令中。

Answer 1

一个指令，按照它的定义方式，总是附加到一个 DOM 节点上。因此，当您定义指令时，它会“扩展”或替换它所附加到的 DOM 节点。

在某些情况下(如对话框)，您将无法将 DOM 节点附加到任何特定的父节点。在这些情况下，使用服务是有意义的，并且 Controller 仍然可以远离 DOM 位，因为 DOM 操作将被封装在服务中。

弹出窗口可能是我们可能使用服务的另一种情况，但与对话框不同的是，弹出窗口是附加到 DOM 节点的。所以，即使那是一个略微灰色的区域。

因此，一个基本而简单的测试是，“可以将这段 DOM 操作代码附加到 DOM 节点上吗？”如果是，则指令。如果没有，则服务。

对话框和自定义确认框是您使用服务的典型示例。