更改控制器内的模型对象以操作 DOM - Angular js- 最佳实践？答案

【问题标题】：changing model objects inside controllers to manipulate DOM - angular js- Best practices?更改控制器内的模型对象以操作 DOM - Angular js- 最佳实践？
【发布时间】：2014-05-09 16:03:23
【问题描述】：

在阅读下面的帖子并在 Angular js 上工作了一段时间后，我有一个简单的问题。

帖子：no dom manipulation from angular js controllers

关注点（来自帖子）：不要使用控制器来
操作 DOM——控制器应该只包含业务逻辑。将任何表示逻辑放入控制器会显着影响其可测试性。 Angular 具有适用于大多数情况的数据绑定和封装手动 DOM 操作的指令。

问题：如果我有一个简单的 Angular 应用程序并单击按钮，我正在调用我的控制器的功能。在该功能中，我想做一些简单的业务逻辑，并根据该业务逻辑输出，我想隐藏/显示一个按钮。

最好的方法是什么。

我目前的做法是：PLUNKER EXAMPLE （这种做事方式是否违反了 Angular js 领域的法律。这是否反对测试？请纠正我）

【问题讨论】：

你正在做的很好。您希望在控制器中避免使用 if ( $scope.isAdmin ) $('#password').show(); 之类的代码。
我会将重置按钮逻辑移动到控制器范围内的函数中，以使其更易于测试，就像您使用 checkLoginName 一样。否则看起来不错。
谢谢，但不会像 jquery 那样降低可读性。我的意思是一些函数被调用并且一些模型改变（这是不可避免的）然后突然一些 div /button 消失了。我的意思是，我的做法是否完美，忘记了这些疑虑

标签： angularjs dom angularjs-directive angularjs-controller

【解决方案1】：

Angular 指南并没有说“不要使用控制器来操作 dom”，因为你永远不应该因为控制器中的某些东西而改变 dom - 而是你永远不应该直接在控制器中修改dom。不要使用 document.getElementById，不要使用 $("#element") 等 - 永远不要与 dom 对话，让您的模型通过将模型绑定到 dom 来处理这些问题。

当你发现自己想要使用 jQuery 在控制器中直接与 dom 对话时，是时候查看指令了。 http://docs.angularjs.org/guide/directive

我同意@tasseKATT，将重置按钮代码上的 ng-click 代码移动到一个函数中——即使只是为了理智。

编辑

这是可测试的吗？是的 - 比将内容内联在 HTML 中或直接依赖/修改 DOM 更重要。

在这种情况下，您需要测试的只是您的作用域函数是否按照应有的方式执行 - 并相信 Angular 人员已经测试了他们的绑定按文档说明工作的事实。您不必测试 ng-click 调用您的函数，当使用任何参数调用您的函数时，您必须测试它是否符合规范要求。

就内联或在 document.ready 等中编写这种类型的代码而言更容易 - 这只是习惯 Angular 做事方式的一部分。由于多年使用 jQuery 进行绑定，它肯定需要一些时间来适应。我认为用“旧”方式更难。

查看这个网站上有关测试 Angular 的帖子——有关于测试控制器、指令、服务等的文章——真的帮助我把它们放在一起。 http://www.benlesh.com/2013/05/angularjs-unit-testing-controllers.html

【讨论】：

好的，我明白了...几个问题.. 1. 这种改变模型并通过 ng-shows/ng-hides/toggles 反映的方式——这是“可测试”还是“不”（因为我担心会出现一个点，即这些“函数”会被调用，而这些“函数”又会调用更多函数，这会导致某些 dom 元素被显示/隐藏 - 请注意：我担心的不是结果，而是测试-ability)..... 2. 我发现内联编写这些内容很容易，因为与将它们移动到函数相比，这增加了可读性..我应该改变这种做法吗？