Ich bin ein wenig neu in AngularJS und versuche, ein benutzerdefiniertes Auswahlsteuerelement zu schreiben, das auf der benutzerdefinierten Auswahl von Zurb Foundation basiert (siehe hier: Ссылка )
Ich weiß, dass ich dafür eine Direktive verwenden muss, bin mir aber nicht sicher, wie ich das erreichen soll.
Es muss wiederverwendbar sein und die Iteration von jedem Array ermöglichen, das an es übergeben wird. Ein Rückruf, wenn der Benutzer das Element aus der Dropdown-Liste auswählt, wird wahrscheinlich benötigt.
Hier ist das Markup für die benutzerdefinierte Foundation-Dropdown-Liste:
%Vor%Das funktioniert jetzt. Ich kann das Steuerelement über die Strg-Taste auf dieser Seite auffüllen. Wie Sie jedoch sehen können, müsste ich dies jedes Mal tun, wenn ich ein benutzerdefiniertes Dropdown-Steuerelement verwenden möchte.
Irgendwelche Ideen, wie ich dieses Baby in eine wiederverwendbare Direktive verwandeln kann?
Danke für jede Hilfe!
Chris
Wenn Sie Ihre Anweisungen nicht nur auf derselben Seite, sondern in mehreren AngularJS-Apps wiederverwendbar machen möchten, ist es ziemlich praktisch, sie in einem eigenen Modul einzurichten und dieses Modul als Abhängigkeit in Ihre App zu importieren.
Ich nahm Cuong Vo's PLNKR oben (so geht der erste Kredit zu ihm) und trennte es mit diesem Ansatz. Wenn Sie nun eine neue Direktive erstellen möchten, fügen Sie sie einfach zu reusableDirectives.js hinzu und alle Apps, die bereits ['reusableDirectives'] als Abhängigkeit haben, können diese neue Direktive verwenden, ohne dass Sie dazu zusätzliche js hinzufügen müssen bestimmte App.
Ich habe auch das Markup für die Direktive in seine eigene HTML-Vorlage verschoben, da es viel einfacher zu lesen, zu bearbeiten und zu pflegen ist als direkt in der Direktive als String.
html
%Vor%app.js
%Vor%reusableDirectives.js
%Vor%zurb-select.html
%Vor%Ist etwas wie das, wonach Sie suchen?
Im obigen Beispiel können Sie zwei Attributparameter an Ihre benutzerdefinierte zurbSelect-Direktive übergeben. Optionen ist eine Liste von Auswahloptionsobjekten mit einem Namensattribut, und clickCallback ist die Funktion, die im Bereich des Controllers verfügbar ist, die die Anweisung aufrufen soll, wenn ein Benutzer auf einen Abschnitt klickt.
Beachten Sie, dass in der Link-Funktion kein Code enthalten ist (hier würde die Logik für Ihre Anweisung normalerweise stehen). Alles, was wir tun, ist ein Wrapping einer Vorlage, so dass es wiederverwendbar ist und einige Parameter akzeptiert.
Wir haben einen isolierten Bereich erstellt, sodass die Richtlinie nicht von übergeordneten Bereichen abhängig sein muss. Wir haben den isolierten Gültigkeitsbereich an die übergebenen Attributparameter gebunden. Das '& amp;' bedeutet binden an den Ausdruck im übergeordneten Bereich Aufruf dieses (in unserem Fall die Callback-Funktion in unserem Controller verfügbar) und das '=' bedeutet eine Zwei-Wege-Bindung zwischen den Optionen Attribut, so dass, wenn es im äußeren Bereich ändert, ist die Änderung hier reflektiert und umgekehrt.
Wir beschränken auch die Verwendung dieser Direktive auf nur elements (). Sie können dies auf Klasse, Attribute usw. einstellen.
Für weitere Details ist das AngularJs-Handbuch sehr gut:
Hoffe, das hilft.
Tags und Links angularjs angularjs-directive