改变控制器内的模型对象来操纵DOM - 角度js-最佳实践?

时间:2014-03-30 09:49:44

标签: angularjs dom angularjs-directive angularjs-controller

在阅读下面的帖子并在角度js上工作一段时间之后,我有一个简单的问题。

帖子:no dom manipulation from angular js controllers

关注点(来自帖子):不要使用控制器来 操纵DOM - 控制器应仅包含业务逻辑。将任何表示逻辑放入控制器会显着影响其可测试性。 Angular对大多数情况和指令进行数据绑定以封装手动DOM操作。


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

最好的方法是什么。

我目前的做法是:PLUNKER EXAMPLE (这种做事的方式是否会破坏角度js领域的规律。是否反对测试? 请纠正我)

1 个答案:

答案 0 :(得分:8)

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