javascript - 操纵多个元素的 Angular JS 指令

Question

据我了解，每当我们出于任何原因(显示数据、控制布局行为等)想要在 Angular JS 中进行 DOM 操作时，我们都应该使用指令。现在，有时对一个元素的某些 DOM 操作需要有关其他 DOM 元素的信息才能起作用。

一个真实世界的例子:假设我们想要调整一个 div 的大小以始终适合所有屏幕。所以基本上 div 有一个定义的高度，我们想根据内容等改变这个高度以使 div 填满屏幕。在进行此类操作时，通常我们需要考虑其他 DOM 元素，如标题等。

另一个例子如下:假设我们有一个登录表单，在表单的底部我们想要一个链接允许用户在没有帐户的情况下注册。当用户单击按钮时，它应该将表单从登录翻转为注册(通常其他表单已编码并隐藏)。没关系，如果我们在链接上添加一个指令来执行此操作，它需要操作表单 div，如果我们放入表单 div，它需要与链接通信。

在这些情况下(我真的很笼统，那只是两种可能的情况)，是否有关于我们应该如何行动的一般指南？

我的意思是，我们有一些 DOM 元素 <A>我们想以某种方式操纵它，但为此，我们需要有关另一组 DOM 元素的信息 <A1> , ... , <An> ，那么我们如何处理这个问题呢？

我考虑过使用 require并共享指令 Controller 。但这很奇怪，再次以调整大小的例子为例 <div maintain-height>正在maintain-height具有调整此 div 大小的逻辑的指令。然后为了与它通信，我们需要在其他所有触发调整大小的地方放置一些需要这个指令的指令。这看起来不自然，在其他情况下我认为感觉是一样的。

那么，当我们遇到这种情况时，我们如何处理它来保持一切都写得很好、可维护、可测试等等？

Answer 1

执行此操作的要求可能表示非 Angular 架构。您需要的任何信息都应该在您的 View 模型中，或者在当前范围内，或者在您可以轻松访问的另一个范围内。您可以通过广播(或发出)消息在作用域之间进行通信。您还可以将所需的数据放入服务中，然后在需要的任何地方将其注入(inject) Controller 。

如果出于某种原因您必须访问其他元素并直接从它们读取数据，您可以在指令中以正常的 jQuery/jQLite 方式执行此操作。还有 $document 服务。

您描述的特定用例似乎很奇怪。为什么不直接使用 CSS 来处理调整 DOM 元素的大小？

您的其他用例(更改表单)将由范围变量处理，例如 showLogin。根据该变量的值隐藏或显示两种不同的形式。还是我遗漏了您的要求？