angularjs - 更改 Controller 内的模型对象以操作 DOM - Angular js- 最佳实践？

Question

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

帖子:no dom manipulation from angular js controllers

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

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

最好的方法是什么。

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

Answer 1

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

当您发现自己处于想要使用 jQuery 直接在 Controller 中与 dom 对话的情况时，是时候查看指令了。 http://docs.angularjs.org/guide/directive

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

编辑

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

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

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

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