Modellobjekte in Controllern ändern, um DOM zu manipulieren - eckige js - Best Practices?

Question

Ich habe eine einfache Frage nach dem Lesen der Post unten und arbeiten seit einiger Zeit auf eckigen js.

der Beitrag: no dom manipulation from angular js controllers

der betreffende Punkt (von der Post): -Controller verwenden Sie nicht zu
DOM manipuliere - Controller sollten nur Geschäftslogik enthalten. Wenn Sie eine Präsentationslogik in Controller einfügen, wirkt sich dies erheblich auf die Testbarkeit aus. Angular verfügt für die meisten Fälle und Direktiven über Databinding, um manuelle DOM-Manipulation einzukapseln.

---

die Frage: Wenn ich einen einfachen Winkel App habe und auf einer Schaltfläche klicken i eine Funktion von meinem Controller nennt. In dieser Funktion möchte ich eine einfache Geschäftslogik machen und abhängig von dieser Geschäftslogikausgabe möchte ich eine Schaltfläche verbergen/anzeigen.

Was ist der beste Weg, es zu tun.

Meine heutige Art und Weise, dies zu tun ist: PLUNKER EXAMPLE (nicht so Sachen zu tun, das Gesetz in der Winkel js Reich bricht, ist, dass gegen Tests bitte korrigieren Sie mich.?)

Answer 1

Die Angular Richtlinien don‘ Ich sage "benutze keine Controller, um das Dom zu manipulieren" in dem Sinne, dass du niemals die Dom-Änderung als Ergebnis von etwas in einem Controller haben solltest - sondern dass du niemals in einem Controller das Dom direkt ändern solltest. Benutze document.getElementById nicht, benutze $ ("# element"), etc. - rede niemals mit dem dom, lass dein Modell das übernehmen, indem du das Modell an das dom bindest.

Wenn Sie sich in einer Situation befinden, in der Sie jQuery verwenden möchten, um mit dem dom direkt in einem Controller zu sprechen, ist es an der Zeit, Direktiven anzusehen. http://docs.angularjs.org/guide/directive

Und ich stimme mit @tasseKATT überein, verschiebe den ng-click-Code auf dem Reset-Button-Code in eine Funktion - auch wenn nur aus Gründen der Vernunft.

bearbeiten

Ist dieses prüfbar? Ja - viel mehr als Dinge in HTML zu integrieren oder direkt auf das DOM zu setzen.

In dieser Situation müssen Sie nur testen, dass Ihre Scope-Funktionen tun, was sie sollen - und darauf vertrauen, dass die Angular-Leute bereits die Tatsache getestet haben, dass ihre Bindungen wie dokumentiert funktionieren. Sie müssen nicht testen, dass ng-click Ihre Funktion aufruft. Sie müssen testen, ob sie mit den Parametern aufgerufen wird, die Ihre Funktion erfüllt.

Soweit es einfacher ist, diese Art von Code inline oder in document.ready usw. schreiben - das ist nur ein Teil der Gewöhnung an die Angular Art, Dinge zu tun. Aufgrund jahrelanger Bindung mit jQuery ist es sicherlich etwas gewöhnungsbedürftig. Ich würde argumentieren, dass es schwieriger ist, es auf die "alte" Art und Weise zu tun.

Überprüfen Sie die Beiträge auf dieser Website, die sich mit dem Testen von Angular befassen - es gibt Aufstellungen über das Testen von Controllern, Richtlinien, Diensten usw. - wirklich geholfen, alles für mich zusammen zu setzen. http://www.benlesh.com/2013/05/angularjs-unit-testing-controllers.html