Vraag Angular-ui-router krijgt twee staten tegelijkertijd actief


Ik moet twee toestanden parallel gebruiken, een voor mijn pagina en een ander voor een modaal met verschillende substatussen. Door nu de modale status te bellen, wordt mijn pagina gewist sinds de pagina-status is gewijzigd.

Het maken van een onderliggende kind van mijn pagina zou geen oplossing zijn, omdat de modal op verschillende pagina's wordt gebruikt.

Voorbeeld:

$stateProvider
.state('user', {}) // page
.state('bookshelf', {}) // page
.state('books', {}) // modal
.state('books.read', {}) // sub state of modal

Dus als ik het doe user en open mijn modal dan zou de staat veranderen in books, mijn modaal zou dan de inhoud hebben maar de inhoud van de pagina zal worden weggevaagd.

Hoe los ik het op?


28
2018-03-10 23:26


oorsprong


antwoorden:


Ik geloof dat de manier waarop je dit wilt doen, momenteel niet mogelijk is met UI.Router. Wat je beschrijft is een modaal bestanddeel (wat idealiter zou worden geschreven als een richtlijn), die zijn staat onafhankelijk van de hoofdtoestand volgt.

De manier om erover na te denken, is dat UI.Router werkt door een statusboom te maken. Je kunt op een bepaald moment maar naar één tak van de boom kijken. Je kunt dieper door een tak gaan (dat wil zeggen: book, book.open, book.open.checked), maar je kunt niet op twee plaatsen tegelijkertijd zijn.

Een ander probleem met het bovenstaande probleem is hoe u de staat van de twee verschillende bomen in één URL kunt serialiseren? Dat wil niet zeggen dat het niet kan, het is gewoon een moeilijk probleem om op te lossen.

Bekijk deze problemen:

Lees ook deze repo's, ze kunnen verder in de trant zijn van het oplossen van het probleem.

Wat betreft het oplossen van uw directe probleem, denk ik dat de 'gemakkelijkste' manier zou zijn om de controle over de toestand van het modale in uw configuratie te zetten.

In plaats daarvan zou ik een soort van root- of abstract-status toevoegen en vervolgens bijhouden of de modal daar open is. Vervolgens kunt u communiceren tussen controllers die evenementen gebruiken als hier getoond. Opmerking: er zijn implicaties voor de prestaties met luisteren naar $rootScope, dus zorg ervoor dat je die onderzoekt. Echter (iemand voelt zich vrij om mij te corrigeren), de implementatie hier heeft die problemen niet, omdat het AppCtrl wordt nooit vernietigd.


15 januari 2015 Bewerken

Blijkt dat dit een vrij populaire use-case is, en een van de belangrijkste bijdragers aan UI Router onderhoudt een plug-in / toevoeging genaamd UI Router-extra's

Het bevat ook hulpprogramma's voor lui laden, genaamd "Future States", die zeer nuttig zijn.

Dat gezegd hebbende, een eigenschap waarvan ik hoop dat het tijd wordt om eraan te werken, is het handhaven van alle toestanden binnen de URL (of misschien, lokale opslag) en het toestaan ​​van herbruikbare "staatscomponenten". Dit laatste bevindt zich ook in de routekaart van de UI Router.


26
2018-03-18 23:21