Question

它的常识是不应该在AngularJS控制器中执行DOM操作，但是很难找到为什么它确实是一件坏事。所有消息来源都说它难以测试，因为控制器应该用于指令之间的通信，但是没有用代码说明为什么这是一件坏事。

根据我的理解，我认为控制器与指令不同，不与任何特定的HTML相关联，因此控制器所做的所有DOM修改都很可能会失败。这肯定会使开发和测试变得复杂。

在子指令的链接函数之前执行的指令中的控制器也会失败，因为控制器可能不知道子指令的实际HTML是什么。链接在控制器功能之后执行，可能会修改HTML结构。

我希望我在这里有意义，如果有人能澄清为什么从控制器操作DOM是一件坏事，也许一些代码示例或链接可以很好地解释它。

Answer 1

使用代码示例更难以证明自己的观点的原因是，原因无法真正用短代码片段表示（对于Stack Overflow来说足够短）。这实际上是一种可维护性预防措施。从长远来看，您希望能够独立地独立地改变控制器和视图背后的逻辑，因为否则耦合的控制器和视图对倾向于保持这种方式，并且在不破坏另一个的情况下改变其功能的能力相互限制。一旦您决定更改视图的任何内容，您就有可能在不触及控制器代码的情况下使代码中断。

随着时间的推移，测试变得越来越容易，因为您拥有的测试越多，您希望事物越模块化，并且尽可能少地依赖变量和参数。

同样，正是维护推动了这一建议。上面列出的问题可能并不是那么糟糕的开始。但是想象一下，采用一个你没有从头开始构建的项目，并且知道控制器和视图之间的耦合背后的所有复杂性，将这个应用程序结合在一起。如果您的应用程序达到数千行代码，即使您从头开始构建它，也不可能知道所有这些错综复杂的内容怎么办？

为了更全面地了解为什么设计模式与您所提到的设计模式是必要的，您可以参考此google search，只要您愿意接受，这将带您踏上旅程。为了大致了解为什么设计模式甚至存在以及为什么许多人最终反复提出同样的事情，你可以参考引入设计模式的催化剂之一，Christopher Alexander。他向我们展示了模式是他们的模式，因为他们运作良好，人们重复运作良好。

Answer 2

如果你看一下如此受欢迎的问题"Thinking in AngularJS" if I have a jQuery background?，你会得到一些提示。

我认为DOM操作既不需要也不需要完成的最大因素之一是因为当涉及DOM链接时，Angular使用声明性方法，而不是使用直接DOM操作的命令式方法。一些答案详细说明了声明式和命令式方法之间的这种区别。

使用jQuery，您可以一步一步地告诉DOM需要发生什么。同 AngularJS你描述了你想要的结果，但没有描述如何做到这一点。更多关于这里。另外，请查看Mark Rajcok的答案。

此处What is the difference between declarative and imperative programming

还提供了有关此主题的更全面的处理方法

通过这种方法，控制器实现得以简化，随着代码库大小的增加和复杂性的增加，我们开始获得真正的价值。

Answer 3

我的观点略有不同，涵盖的不仅仅是测试。设计人员能够控制HTML布局，否则将通过在Angular Controller内编写代码来接管。请考虑以下代码段（这只是一个简单的示例）

<div ng-repeat="article in articles">
    <p class="article-body">{{article.text}}</p>
</div>

此示例仅迭代集合并在单独的段落标记中打印文章。虽然可以在Angular Controller中循环遍历集合并动态生成包含文本的段落标记。它将剥夺设计师修改外观和功能的能力。感觉。因此，如果需要显示文章标题，而不是这样做

<div ng-repeat="article in articles">
    <span class="article-title">{{article.title}}</span>
    <p class="article-body">{{article.text}}</p>
</div>

设计人员现在必须找到Angular Controller代码来修改DOM操作。只需比较上述两种方法，并猜测哪一种方法将提供更大的灵活性。

AngularJS - 为什么在控制器中操作DOM是一件坏事？

3 个答案: