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

Question

我阅读(并尝试测试)Angular 应用程序越多，我发现 Controller 引用 DOM 是一种不好的做法。 (例如 this blog post )。

我肯定遗漏了一些重要的东西，因为如果 Controller 无法访问 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"/>
• 在 Controller 的 makeThemBlue功能，我会(例如)通过类名找到所有的 div，并将类更改为使它们变成蓝色的其他内容

现在想想我的真实应用程序要复杂得多 - 许多“框”由嵌套指令组成，可以四处拖动，并保存它们的位置。 Controller 读取所有保存的设置，并根据用户保存的方式布置所有内容。

在没有 Controller 访问 DOM 的情况下，我将如何执行上述任一示例的操作？

Answer 1

这是我的主要规则:

1. 指令 - 用于实体组件和 DOM 操作。
2. Services - 用于业务逻辑和保存状态。指令、 Controller 、服务等应该使用它们。
3. Controllers - View 助手。不应在内部执行任何业务逻辑。对于复杂的问题，请使用服务。

在你的情况下，一个盒子应该是一个指令。
您的指令将使用可观察的服务并注册点击事件。
当点击事件发生时，观察者将通知所有注册的 directive 实例它被点击了，你应该在你的 directive 中应用它。