如何处理DOM和Controller之间的交互？

Question

我阅读（并尝试测试）Angular应用程序的次数越多，我发现控制器引用DOM是不好的做法。 （例如this blog post）。

我必须遗漏一些大的东西，因为如果控制器无法访问DOM（例如通过“常规”javascript调用，如document.getElementsByClassName），那么我不明白如何做很多事情我我认为非常基本。

这是一个人为的，简单的例子，它与我的应用程序有一些相同的问题：

• 我有一个指令，它只是一个红色框（应用了一些样式的div），并使用ng-transclude。所以我会在我的html文件中使用它，如<red-box>Text that goes in the red box</red-box>
• 单击按钮时，会将所有红色框的颜色更改为蓝色。我的html文件中会有类似的内容：<intput type="button" value="Make Them Blue" ng-click="makeThemBlue"/>
• 在控制器的makeThemBlue函数中，我（例如）按类名查找所有div，并将类更改为使其为蓝色的其他类

现在考虑我的真实应用程序要复杂得多 - 许多“盒子”由嵌套指令组成，可以拖动，并保存其位置。控制器读取所有已保存的设置，并根据用户保存的方式将所有设置完成。

如果没有控制器访问DOM，我将如何执行上述任一示例之类的操作？

Answer 1

以下是我的主要规则：

1. Directives - 用于实体组件和DOM操作。
2. Services - 用于业务逻辑和保存状态。指令，控制器，服务等应该使用它们。
3. Controllers - 视图助手。内部不应该执行业务逻辑。对于复杂问题，请使用服务。

在您的情况下，一个方框应为directive 您的指令将使用可观察的service并注册click事件 当发生click事件时，观察者将通知所有已注册的directive个实例，并且您应该在directive中应用该实例。

Answer 2

您应该为此目的使用指令。

请参阅指令文档

Angular Directives

它为您提供了与Access Dom

相似的内置jquery功能

指令中的链接功能对Manipulate Dom来说是惊人的，使用与jquery相同的语法（几乎）。

此外，您可以通过提供服务来维护功能块，因此您可以将每个登录分开，并且您可以访问Dom并轻松操作它们

向指令的控制器函数注入服务将使您能够维护代码的可重用性。

Answer 3

让DOM访问控制器（或者从指令中本地访问）。这就是声明范式的全部内容。

如果您的盒子需要更改它的颜色，请让它从控制器中的值或指令本身读取该值，类或任何您需要的内容。

从一个非常基本的意义上来说：

<my-directive color="getColor()"></my-directive>