AngularJS modale Fensteranweisung

8

Ich versuche, eine direktive angleJS-Direktive für Twitter Bootstrap Modal zu machen.

%Vor%

Hier ist JsFiddle Beispiel Ссылка

Aber die handler () -Funktion wird so oft ausgeführt wie Anweisungen auf der Seite. Warum? Was ist der richtige Weg?

    
okolobaxa 16.11.2012, 09:48
quelle

4 Antworten

7

Es gibt eine funktionierende native Implementierung in AngularStrap für Bootstrap3, die ngAnimate von AngularJS v1.2 +

Sie können auch zur Kasse gehen:

Olivier 06.05.2013, 14:57
quelle
8

Ich habe festgestellt, dass nur die Verwendung von twitter bootstrap modals die Art und Weise, wie die twitter bootstrap docs sagen, ausreicht, um sie zum Laufen zu bringen.

Ich verwende ein Modal, um ein Benutzer-Bearbeitungsformular auf meiner Admin-Seite unterzubringen. Die Schaltfläche, die ich benutze, um sie zu starten, hat ein ng-click-Attribut, das die Benutzer-ID an eine Funktion dieses Bereichs weiterleitet, die diese wiederum an einen Dienst weiterleitet. Der Inhalt des Modals ist an seinen eigenen Controller gebunden, der auf Änderungen aus dem Service wartet und Werte aktualisiert, die im Formular angezeigt werden sollen.

Also ... das ng-click-Attribut gibt tatsächlich nur Daten aus, das modale wird immer noch mit den data-toggle- und href-Tags ausgelöst. Was den Inhalt des Modals betrifft, ist das ein partieller. Ich habe also mehrere Schaltflächen auf der Seite, die alle die einzelne Instanz des Modales auslösen, das sich im Markup befindet, und abhängig von der angeklickten Schaltfläche sind die Werte im Formular in diesem Modal unterschiedlich.

Ich schaue mir meinen Code an und schaue, ob ich etwas davon rausholen kann, um eine PLNKR-Demo zu erstellen.

BEARBEITEN: Ich habe eine schnelle Demo zusammengestellt, die im Wesentlichen zeigt, was ich in meiner App verwende: Ссылка

Bonus, es hat einige Tests, um sicherzustellen, dass zwei Passwortfelder übereinstimmen (oder sie als fehlerhaft hervorhebt), und deaktiviert die Übermittlungsschaltfläche, wenn die Kennwörter nicht übereinstimmen, oder für neue Benutzer Benutzername und Kennwortfelder leer sind. Natürlich macht das Speichern nichts, da es nur eine Demo ist.

Viel Spaß.

    
Will Vincent 15.01.2013 15:58
quelle
6

Nun, es sei denn, Sie wollen das neu erfinden, sonst denke ich, dass es schon eine Lösung gibt.

Sehen Sie sich dieses von AngularUI an. Es läuft ohne Twitter Bootstrap.

    
maxisam 16.11.2012 15:38
quelle
4

Ich weiß, dass es zu spät sein könnte, aber ich begann herauszufinden, warum der HF mehrmals als Übung aufgerufen wurde und ich konnte nicht aufhören, bis ich fertig war: P

Der Grund war einfach, dass jedes Div, das du für jedes Modal erstellt hast, keine eindeutige ID hatte, sobald ich festgestellt habe, dass alles anfing zu arbeiten. Fragen Sie mich nicht, was der genaue Grund dafür ist, hat wahrscheinlich etwas mit dem Aufruf $ ('#' + scope.modalId) .modal () zu tun.

Nur wenn ich mein Ergebnis veröffentlichen sollte, wenn jemand anderes versucht, das herauszufinden:)

    
emz 14.09.2013 07:05
quelle

Tags und Links