Ich habe ein horizontales Dropdown-Menü mit AngularJS erstellt.
Der Menübereich wird von einem Winkelregler namens menuController verwaltet. Das Standard-Menü-Verhalten ist implementiert, so dass bei Hover-Hauptmenü-Eintrag hervorgehoben wird, es sei denn es ist deaktiviert. Wenn Sie auf den Hauptmenüpunkt klicken, wird das Untermenü umgeschaltet. Wenn das Untermenü geöffnet ist, möchte ich, dass es verschwindet, wenn der Benutzer irgendwo anders auf das Dokument klickt. Ich habe versucht, eine Direktive zu erstellen, die auf das click -Ereignis eines Dokuments wartet, aber nicht sicher ist, wie ich den menu-controller darüber benachrichtigen soll. Wie soll ich dieses Szenario auf AngularJS-Basis implementieren?
Teilweise funktioniert Original Plunk ohne Dokument-Klick-Bearbeitung Mechanismus.
UPDATE:
Auf der Grundlage des beantworteten Vorschlags ging ich mit dem Brodcast-Ansatz fort und aktualisierte das Skript, um meine neuesten Änderungen widerzuspiegeln. Es funktioniert nach meiner Erwartung. Ich habe den GlobalController $ Broadcast eine Nachricht senden und MenuController diese Nachricht abonnieren.
UPDATE 2: Modifizierter Code zum Einfügen globaler Ereignisdefinitionsdaten.
%Vor%UPDATE 3: Modifizierter Code in der vorherigen Implementierung, um einen Fehler zu beheben, bei dem der Dokumentenklick mehrmals ausgelöst wird. Fast ähnlicher Ansatz, aber dieses Mal, wenn jemand wieder irgendwo auf dem Menü klickt, wird der Klick ignoriert. Weitere Informationen finden Sie im New Working Plunk für das vollständige Codebeispiel
%Vor%UPDATE 4: Eine weitere alternative Option wurde implementiert. Weitere Informationen zum vollständigen Code finden Sie in der Option 2 Plunk Beispiel
%Vor%Sie können die Anweisung in etwa so vereinfachen:
%Vor%Übergeben Sie dann eine Funktion vom menuController an:
%Vor%So muss der globalController nicht benötigt werden.
Wenn Sie den globalController behalten und von dort aus behandeln wollen, können Sie:
1.) Machen Sie das Menü zu einem Service und injizieren Sie es dann in alle Controller, die es steuern können.
2.) Senden Sie ein Ereignis von globalController und hören Sie es in menuController ab.
Spezifische alternative Lösung: Sie können die Anweisung in einen 'On-Outside-Element-Klick' umwandeln und es so verwenden:
%Vor% Die Anweisung sieht so aus und ruft nur closeMenus() auf, wenn Sie außerhalb von ul :
Working Plunker: Ссылка
Nun, du hast es gut gemacht. Wenn Sie die gleiche Anweisung auf menuController
und lassen Sie den Click-Handler in Ihrem menuController festlegen, auf den Sie alle eingestellt sind.
Ich glaube nicht, dass es Schaden an mehreren Handlern für das Ereignis auf dem Dokument gibt. Wo immer Sie diese Direktive definieren, kann dieses Element auf das globale Click-Ereignis reagieren.
Update : Wenn ich dies getestet habe, führt das zu einem anderen Problem, bei dem diese Methode aufgerufen wird, wo auch immer Sie auf die Seite klicken. Du brauchst jetzt einen Mechanismus, um zu unterscheiden.
Tags und Links javascript angularjs