2013-10-21 6 views
5

Gibt es in einer einzelnen Seitenanwendung eine Möglichkeit, zu einer AngularJS-Route hin und her zu wechseln und sie im gleichen Zustand wie zuvor anzuzeigen?AngularJS: Erinnern an Zustand/Setup komplexer Ansichten mit Routen

Normalerweise würde dies durch das Binden von Daten in einem übergeordneten Bereich implementiert werden. Während dies für eine leichtgewichtige Ansicht leicht einzurichten ist, kann es für Ansichten mit vielen grafischen Elementen mühsam sein.

Hier ist ein Beispiel, wo Benutzerfreundlichkeit verbessern könnte die vorherige Route Zustand erinnert haben: auf der folgenden Seite, vorstellen, dass

  • Sie auf Artikel stehen 1 und wählen Sie Tab 2
  • dann zu Punkt bewegen 2
  • schließlich wechseln Sie zurück zu Punkt 1: Tab 2 wird nicht mehr gewählt :-(

http://angular-route-segment.com/src/example/#/section1/1

Es scheint, dass die Ansichten zerstört/konstruiert sind, wenn zwischen den Routen hin und her geschaltet wird.

Eine Lösung etwa Speicher den Zustands der Benutzerschnittstelle in einem übergeordneten Bereich sein würde, aber es hat die folgenden Gefahren:

  • Erstellen ein Objekts Speicher all die kleinen Details der Benutzerschnittstelle
  • Erstellung komplexen Logik über -Einsparung und- die UI in dem gleichen Zustand wie zuvor Zurücksetzen
  • UI Zustand in einem Datenmodell speichert klingt nicht, dass MVC-Ish

mit Show/hide of div Das Speichern der Ansichten speichert den Status, aber dann wird keine Route verwendet und das Switching-Geschäft muss manuell implementiert werden. Ich benutze gerne Routen, weil 1. Browserhistorie Navigation (Hash in der URL) und 2. es ist einfach einzurichten.

Wenn der UI-Status nicht gespeichert wird, ist es ähnlich, dass Chrome beim Wechseln zwischen den Registerkarten die Seiten neu lädt: nicht sehr benutzerfreundlich.

Gibt es einen Winkelweg?

Antwort

1

Ihr $ routeSegment-Ansatz ist sehr interessant. Die $ routeSegment Dienst konnte Stecker in die $ routeChangeStart Ereignis, um

  • Irgendwie eine „sub Weggeschichte“ halten auf allen Pfaden bisher vielleicht nur gesehen, für die nicht ausdrücklich ihre UI Zustand zu halten konfiguriert. In Ihrem Beispiel für den Pfad "/ section1/1" wäre der gespeicherte Unterpfad "/ Y", wenn Tab 2 ausgewählt wurde. Die Dinge werden interessant, da auch dynamische Pfade mit $ routeParams abgedeckt werden müssen.
  • Verwenden Sie diesen Verlauf zum Umleiten, indem Sie $ location.path im Ereignishandler verwenden. Ein $ routeChangeStart-Ereignis, bei dem next.originalPath "/ section1/1" lautet, wird möglicherweise auf "/ section/1/Y"
umgeleitet