eckiges Material Dynamische mdTabs und ui-router namens view und states

Question

Derzeit arbeite ich an einem Projekt, das dynamische Registerkarten benötigt. Ich benutze eckige Material-Registerkarten für diesen Zweck und benutze ui-router state und named view concept, um den Inhalt der Registerkarten dynamisch zu laden.

Für z.B .:

<!-- mdTabs --> 
    <md-tabs md-autoselect> 

    <!-- mdTab --> 
    <md-tab ng-repeat="tab in home.tabs" label="{{tab.title}}" md-on-select="home.selectTab(tab)"> 

     <md-tab-body> 
     <div ui-view="{{tab.viewName}}"></div> 
     </md-tab-body> 
    </md-tab> 

    </md-tabs> 

Tabs hinzugefügt werden wie:

vm.tabs = [{ 
     title: 'Tab-A', 
     state: 'mainState.tabStateA', 
     viewName: 'tabA' 
    }, { 
    title: 'Tab-B', 
    state: 'mainState.tabStateB', 
    viewName: 'tabB' 
    }]; 

Sie einen Blick auf diese CodePen für die Beispiel-Implementierung erfolgen kann.

Hintergrund: Immer wenn ich die Registerkarten ändere, ändere ich den Zustand und lade den Inhalt. Dieser Status kann weitere n-Ebenen von verschachtelten Zuständen enthalten, die auch dynamisch geladen werden können. Die Registerkarten können dynamisch hinzugefügt oder entfernt werden.

Problem: Meine Anwendung kann theoretisch unbegrenzt Registerkarten haben und das Problem ist, dass, wann immer ich die Registerkarten alle Inhalte immer wieder laden, was die UX verschlechtert, da die Registerkarten in jedem möglichen Zustand sein könnten (UI kann sich ändern) basierend auf der verschachtelten Ebene des Inhalts).

Frage: Können wir etwas wie tun, wie ein Tab geladen wird, sobald es zwischengespeichert werden sollte, und so immer wenn wir zu demselben Zustand zurückkehren, sollte es nicht wieder laden. Und wenn in Zukunft die Registerkarte erneut geladen werden soll, können wir auch eine Logik bereitstellen, um dies zu tun. Ich weiß, dass jemand ähnliche Probleme gehabt haben muss und nur aus Neugier stelle ich diese Frage.

Answer 1

Hat etwas mehr Forschung und fand heraus, dass es ui-router-extras ist, die wie StickyStates aka ParallelStates einige zusätzliche Unterstützung bietet, Deep State Redirect, etc. Für weitere Informationen zu ui-router extras einen Blick darauf werfen.

Für mich war es eine Sackgasse, da die oben erwähnte Bibliotheksunterstützung für angular-ui-router ~0.2.8 vorhanden ist, und ich verwende derzeit die nächste Version von angular-ui-router, d. H. 1.0.0-rc.1. Also kontaktierte ich den Entwickler (ein riesiger Shout-out zu Chris Thielen) und erhielt das Update, dass die Sticky States für ui-router rc-1.0.0 Implementierung abgeschlossen ist. Weitere Informationen finden Sie unter update.

Also im Grunde beantworte ich meine eigene Frage. Die Antwort lautet ui-router-extras, wenn Sie eine ältere Version von ui-router verwenden oder ui-router 1.0.0-rc.1 zusammen mit Sticky States verwenden.

Hinweis: Ich habe die oben genannte Bibliothek nicht getestet, aber wenn ich mir die Dokumente anschaue, bin ich mir ziemlich sicher, dass ich dies in Zukunft für das oben genannte Problem/die Frage verwenden werde.