In den letzten Stunden habe ich die Dokumentation des UI-Routers gelesen. Aber ich kann keine Lösung für mein Problem finden.
Meine Webanwendung hat zwei verschiedene Spalten, eine Liste auf der linken Seite und eine Detailansicht auf der rechten Seite. Wenn Sie ein Element der Liste auswählen, sollten rechts Detailinformationen angezeigt werden.
Welche dieser beiden im Titel beschriebenen Ansätze würden Sie bevorzugen? Wann soll was genutzt werden?
Tatsächlich ist das Szenario List x Detail am besten für ui-router geeignet. Dies sind in der Tat zwei Zustände, die Eltern / Kind (d. H. Kind Staaten, um die Frage zu beantworten) :
List view (z. B. die linke Spalte) . Dies könnte eine dynamische Ansicht sein, mit Paging, Sortierung und Filterung, aber immer noch - dies wird immer ein Gateway sein, ein Elternteil für: Detail view (z. B. die rechte Spalte) . Um ein Detail auszuwählen (es sei denn, man navigiert direkt über die URL) benötigen wir einfach ein List view . Um andere Details auszuwählen, können wir von einer Tatsache profitieren, dass der Eltern / List view -Zustand nicht neu lädt ist, während viele Details ... Das Beste, was wir tun können, ist das Beispiel von ui-router team:
Und wir können auch seine Definition sehen, die Teil dieser Zustandsdefinition ist:
Dieser Link gehört zu den am besten dokumentierten Code-Stücken, an die ich mich erinnere ... Er erklärt alles und hilft auch zu lernen, wie die ui-router Zustandsdefinition funktioniert.
Unten habe ich versucht, diese Macht zu zeigen, indem ich die Definition der Zustände List und Detail anführe.
Der Listenstatus:
%Vor%der Detailzustand:
%Vor%Zusammenfassung: Verwenden Sie in diesen Szenarien die Parent / Child-Statusdefinition, da der Parent nur einmal geladen wird und seine Daten beibehält, während wir unter seinen untergeordneten Elementen iterieren
Überprüfen Sie diese Links für weitere Details:
Tags und Links angularjs angular-ui-router