Ich habe einen abstrakten profile -Zustand, der mehrere untergeordnete Zustände hat (für verschiedene Registerkarten der Profilseite), und dann möchte ich, dass ein anderer untergeordneter Status des Profils modal ist. Ich habe es in etwa so umgesetzt:
Das funktioniert großartig, außer dass editprofile ein Geschwister aus Quadraten und Kreisen ist. Wenn dieser Zustand aktiv ist und das Modal sichtbar ist, wird der Quadrats- oder Kreisstatus entladen und beim Modal wieder geladen ist geschlossen.
Gibt es eine Möglichkeit, diese Status aktiv zu lassen, wenn der profile.editprofile-Status aktiv ist? Ich bin nach etwas wie state..editprofile .
Da es zur Zeit keine ideale Lösung gibt, habe ich mir eine einigermaßen elegante Lösung ausgedacht. Mein Code ist verallgemeinert, leicht zu verstehen und zu kommentieren, so dass er leicht an jedes Projekt angepasst werden kann.
Siehe die Kommentare im Code für die wichtigsten Punkte.
Nun, es sei denn, Sie wollen die modale Implementierung abbrechen, dann würde ich vorschlagen, dass Sie 2 Ansichten in profile.html eins für editprofile.html und andere für profilecircles.html oder profilesquares.html haben, etwa wie folgt:
Und dann der schwierige Teil zum Anzeigen / Verbergen der Profilansicht. Aber das kann mit einer Umschalttaste erfolgen oder nachdem die Aktion im Controller bestätigt wurde.
Der Punkt von ui-router ist, dass die Verschachtelung der Zustände mit der Verschachtelung der URL übereinstimmt. Was das bedeutet, ist in Ihrem Fall, wenn Sie:
%Vor%Sie können nicht erwarten, dass profile.squares und profiles.edit gleichzeitig aktiv sind, da es sich um zwei völlig unterschiedliche URLs handelt. Es ist jedoch möglich zu haben:
%Vor%Dadurch werden profiles.circles während Ihres Modals aktiv, da es sich um einen übergeordneten Status handelt. Aber im Falle von profiles.squares, wenn Sie einen Status haben wollen, der das Bearbeitungsprofil darstellt, benötigen Sie etwas wie:
%Vor%Leider gibt es keinen anderen Weg, wenn Sie die Bearbeitung als Status beibehalten möchten.
Sie können Ihre Registerkartenstatus sticky: true festlegen, indem Sie ui-router-extras verwenden. Sticky-Zustände bleiben beim Navigieren zu einem Geschwister erhalten und sind besonders nützlich für Tabs.
Um es zu verwenden, müssen Sie eine benannte Ansicht für jeden klebrigen Zustand erstellen (Sie können jedoch inaktive anzeigen, siehe unten).
Die API-Seite beschreibt die notwendigen Schritte:
sticky: true
Tags und Links angularjs angular-ui-router