Javascript 如何处理DOM和控制器之间的交互？

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

我必须漏掉一些大的东西，因为如果控制器不能访问DOM（例如，通过“常规的”JavaScript调用，比如“代码>文档.GETelEngsByCalpEngs< /Cord>”），那么我不知道如何做很多我认为非常基本的事情。 下面是一个精心设计的简单示例，它与我的应用程序存在一些相同的问题：

• 我有一个指令，它只是一个红框（应用了一些样式的div），并使用ng transclude。所以我会在我的html文件中使用它，比如红色框中的

  文本

• 单击按钮时，会将所有红色框的颜色更改为蓝色。我的html文件中会有类似的内容：

• 在控制器的

  makeThemBlue

  函数中，我（例如）会按类名查找所有div，并将类更改为使它们变蓝的其他类

现在考虑一下，我的实际应用程序要复杂得多——许多由“嵌套指令”组成的“盒子”，它们可以被拖动，并保存它们的位置。控制器读取所有保存的设置，并根据用户保存设置的方式排列所有内容

---

在不让控制器访问DOM的情况下，我如何执行上述任一示例

为此，您应该使用指令

有关指令，请参阅文档

它为您提供了一个类似jquery的内置功能来访问Dom

指令中的link函数使用与jquery相同的语法（几乎）来操作Dom，这令人惊讶

此外，您还可以通过创建服务来维护功能块，这样您就可以分离每个登录，并且可以访问Dom并轻松地对其进行操作

将服务注入指令的控制器功能将使您能够保持代码的可重用性。

以下是我的主要规则：

指令

-用于实体组件和DOM操作

服务

-用于业务逻辑和保存状态。指令、控制器、服务等应使用它们

控制器

-视图帮助器。内部不应执行任何业务逻辑。对于复杂的问题，请使用服务

在您的情况下，框应该是

指令

您的指令将使用可观察的

服务

并注册点击事件。

---

当单击事件发生时，观察者将通知所有注册的

指令

实例它已被单击，您应该通过让DOM访问控制器（或从指令内部以本机方式访问）来应用

指令中的实例。这就是陈述性范式的全部内容

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

从非常基本的意义上说：

嗯……好的。让我们举一个更简单的例子，其中有一个红色框，当用户单击它时，它会变成蓝色。在这种情况下，我认为我们不需要服务，对吗？那么在指令本身中会有代码来获取DOM元素吗？或者是否有某种方式可以在指令中正确地说'this.setStyle（'background-color'，'blue'）？在这种情况下，它更简单。您的templatehtml是这样的：
ng类
将指向作用域上的字符串，
ng单击
将其从redClass更改为blueClass。