10. Jun

AngularJS: Dynamische Direktiven mit Callback-Funktion im APP-CMS

In unserem APP-CMS wird die Oberfläche komplett dynamisch aufgebaut, die Frontend-Technologie basiert dabei auf AngularJS. Um die Eingabeformulare entsprechend dynamisch aufbauen zu können, haben wir im APP-CMS dynamische Direktiven verwendet. Diese rufen wiederum eine Callback-Funktion auf, um die eingegebenen Werte zu verarbeiten und an die übergeordnete Speicher-Funktion zu übergeben. Im folgenden Artikel gehen wir auf das Zusammenspiel der verschiedenen Komponenten ein.

In unserem APP-CMS werden die zu pflegenden Daten im Backend flexibel über Doctrine Entities konfiguriert. Daraus wird automatisiert über eine JSON-Schnittstelle ein Schema erstellt, anhand dessen im AngularJS-Frontend die Oberflächen generiert werden – im Folgenden Beispiel ein Formular zur Bearbeitung eines Datensatzes:

App-CMS

Die Darstellung des Formulares erfolgt im AngularJS-Controller „form.controller.js“ und wird über die entsprechende View „form.html“ entsprechend in HTML umgesetzt. Dabei werden im HTML-Template alle Felder aus dem Schema der Tabelle in einer Schleife durchlaufen und anhand des Feldtyps (z.B. string, checkbox, multijoin, rte, datetime,…) die passende AngularJS-Direktiven dynamisch geladen. Leider können in AngularJS Direktiven nicht dynamisch im HTML geladen werden, es muss ein Umweg über eine zusätzliche „statische“ Direktive gegangen werden.

Darüber hinaus gestaltet sich der Einsatz von Callback-Funktionen in dynamischen Direktiven nicht ganz so einfach. Callback-Funktionen in dynamischen AngularJS-Direktiven müssen in der aufrufenden Direktive noch einmal an die übergeordnete Instanz (hier Form-Controller) weitergereicht werden.

scripts/controller/form.controller.js

Dem Form-Controller werden aus einem vorherigen List-Controller das zu bearbeitende Objekt übergeben. Zusätzlich wird das Schema (also die Konfiguration der entsprechenden Feldern) aus dem lokalen Speicher geladen.

views/form.html

scripts/directives/form.directive.js

types/string/string.directive.js

In der JS-Direktive werden Änderungen im Eingabefeld direkt an die Callback-Funktion aus dem Direktiven-Aufruf in der form.directive.js weitergereicht. Von dort werden die Änderungen dann entsprechend an den Form-Controller weitergereicht.

types/string/string.html

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.