Ich baue ein neues SPA-Frontend, um das bestehende Sammelsurium veralteter Systeme eines bestehenden Unternehmens zu ersetzen, die veraltet sind und aktualisiert werden müssen. Ich bin neu zu eckig und wollte sehen, ob die Gemeinschaft mir eine Perspektive geben könnte. Ich werde mein Problem angeben und dann meine Frage stellen.
Ich muss mehrere Reihen von Kontrollkästchen basierend auf Daten aus einem .js include erstellen, mit Daten wie folgt:
Die Kontrollkästchen werden mit ng-repeat wie folgt erstellt:
Allerdings benötigte ich die Werte, die durch die Kontrollkästchen dargestellt wurden, um sie einem anderen Modell zuzuordnen (nicht nur mit einer Zwei-Wege-Bindung an das Objekt fieldmappings). Um dies zu erreichen, habe ich eine Direktive erstellt, die ein Ziel-Array destarray akzeptiert, das schließlich dem Modell zugeordnet wird. Ich weiß auch, dass ich einige sehr spezifische GUI-Steuerelemente behandeln muss, wie zum Beispiel das Deaktivieren von "None", wenn etwas anderes überprüft wird, oder das Aktivieren von "None", wenn alles andere nicht aktiviert ist. Auch "None" ist keine Option in jeder Checkbox-Gruppe, daher muss die Anweisung generisch genug sein, um eine Validierungsfunktion zu akzeptieren, die mit dem checked -Zustand der Checkbox-Gruppeneingaben basierend auf dem, was bereits angeklickt wurde, umgehen kann. aber schlau genug, um nicht zu brechen, wenn es keine Option namens "NONE" gibt. Ich fing an, das zu tun, indem ich einen ng-klick hinzufügte, der eine Funktion in der Steuerung anrief, aber indem ich Stapelüberlauf sah, las ich Leute, die sagen, dass es schlecht ist, DOM Manipulationscode in deinem Controller zu setzen - es sollte in Direktiven gehen. Also brauche ich eine andere Anweisung?
Bisher: (html):
%Vor%Richtliniencode:
%Vor%.js Controller-Snippet:
%Vor% Der obige Code ist fertig und funktioniert einwandfrei, außer dem unartigen jquery Code in clearOnNone() , weshalb ich diese Frage geschrieben habe.
Und hier ist meine Frage: Nach all dem, denke ich mir - ich könnte schon fertig sein, wenn ich nur diese GUI-Logik und Validierungs-Junk mit jQuery, die in meinem Controller geschrieben sind, manuell bearbeitet habe. An welchem Punkt wird es töricht, diese komplizierten Anweisungen zu schreiben, über die zukünftige Entwickler mehr rätseln müssen, als wenn ich gerade jQuery Code geschrieben hätte, den 99% von uns mit einem flüchtigen Blick verstehen würden? Wie zeichnen andere Entwickler die Linie?
Ich sehe diesen Over-Stack-Overflow. Zum Beispiel scheint diese Frage so zu sein, als ob sie mit einem Dutzend Zeilen einfacher jQuery beantwortet werden könnte aber er hat sich dafür entschieden, den eckigen Weg zu gehen, mit einer Direktive und einer partiellen ... es scheint wie eine Menge Arbeit für ein einfaches Problem.
Ich möchte nicht, dass diese Frage gegen die Regeln verstößt, also möchte ich wohl wissen: wie SOLLTE Ich schreibe den Code, der prüft, ob "None" ausgewählt wurde ( Wenn es als Option in dieser Gruppe von Kontrollkästchen vorhanden ist), und aktivieren / deaktivieren Sie dann die anderen Kontrollkästchen entsprechend? Eine komplexere Richtlinie? Ich kann nicht glauben, dass ich der einzige Entwickler bin, der Code implementieren muss, der komplexer ist als nötig, nur um einen rechthaberischen Rahmen zu erfüllen. Gibt es eine andere Util-Bibliothek, die ich verwenden muss?
Ich habe dies auf Programmers.StackExchange.com nach Jims Vorschlag gepostet. In der Zwischenzeit habe ich mich auf eine Lösung für den Umgang mit all den schwierigen DOM-Manipulationen festgelegt.
Ich habe es auf beide Arten versucht - das DOM-Ereignis im Controller zu behandeln und es über eine Direktive zu behandeln:
(über Controller) - .js-Code:
%Vor%(über Controller) - HTML-Code:
%Vor%(über Controller) - Anweisungscode:
%Vor% Ich entschied dann, dass ich die event.target.nextElementSibling.textContent.trim() -Linien hasste ... Ich habe das Gefühl, dass ich überprüfen sollte, ob alle diese Methoden existieren oder eine try/catch verwenden. Also habe ich die Anweisung so umgeschrieben, dass sie die Logik vom Controller enthält:
(über Direktive) - HTML Code:
%Vor%(über Direktive) - Direktivencode:
%Vor%Im Rückblick denke ich, dass ich es vorziehe, den ganzen Code in einer Direktive zu speichern, obwohl ich denke, dass es weniger intuitiv und komplexer ist, als die gesamte Handhabung in der Steuerung über jQuery zu werfen. Es schneidet die clearOnNone () - Funktion vom Controller aus, was bedeutet, dass der gesamte Code, der mit dieser Funktionalität zu tun hat, im HTML-Markup und in der Direktive enthalten ist.
Ich bin kein Fan von Code wie this.attributes.labelvalue.nodeValue.trim() , den ich immer noch in meiner Direktive gefunden habe. Für Szenarien wie meiner, wo die Geschäftseinheit bestimmte Anforderungen hat, die (anders ausgedrückt) mühsam und umständlich sind, weiß ich nicht, dass es wirklich eine "saubere" Methode gibt, alles zu codieren.
Ich bin noch neu bei AngularJS, aber ich denke, ich würde es lösen, indem ich entweder einen ng-click -Handler oder $scope.$watch verwende, um den Status des NONE -Modells zu aktualisieren, wenn sich die anderen Modelle ändern.
Ich habe ein jsFiddle ausgepackt, das zeigt, wie es mit ng-click funktionieren kann:
HTML:
%Vor%JavaScript:
%Vor% Und eine Version von jsFiddle, die zeigt, wie es mit $scope.$watch funktionieren kann:
HTML:
%Vor%JavaScript:
%Vor%Tags und Links angularjs