Impostare i parametri di interrogazione URL senza modifica dello stato utilizzando l’interfaccia utente angular

Come dovrei aggiornare l’URL della barra degli indirizzi con un parametro di query che cambia usando l’ui-router di AngularJS per mantenere lo stato quando si aggiorna la pagina?

Attualmente sto usando $state.transitionTo('search', {q: 'updated search term'}) ogni volta che l’input cambia, ma il problema è che questo ricarica il controller, ridisegna la finestra e perde qualsiasi focus di input del testo.

C’è un modo per aggiornare stateParams e sincronizzarlo con l’URL della finestra?

Ho avuto problemi con .transition fino a quando non ho aggiornato con ui-router 0.2.14. 0.2.14 cambia correttamente la barra degli indirizzi (senza ricaricare il controller) usando una chiamata come questa:

 $state.transitionTo('search', {q: 'updated search term'}, { notify: false }); 

edit: se ne è giocato un po ‘di più oggi e ci siamo resi conto che l’ui-router angular ha un’opzione simile a quella del router nativoProvider: “reloadOnSearch”.

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#options-1

È impostato su true per impostazione predefinita, ma se lo si imposta su false sul proprio stato, la modifica dello stato non si verificherà quando i parametri della query vengono modificati. Puoi quindi chiamare $location.search(params); o $location.search('param', value); e l’URL cambierà, ma ui-router non ricostruirà l’intero controller / vista. Probabilmente dovrai anche ascoltare l’evento $locationChangeStart nello scope di root per gestire le azioni di back e forward history all’interno della tua app, poiché anche queste non causeranno cambiamenti di stato.

Sto anche ascoltando l’evento $stateChangeSuccess del mio controllore per catturare il carico iniziale della pagina / rotta.

C’è qualche discussione su github per l’utilizzo di questa funzionalità con modifiche al percorso (non solo modifiche all’URL): https://github.com/angular-ui/ui-router/issues/125 ma non l’ho mai provato dal mio use case era specifico per interrogare i parametri della stringa.

La versione precedente della mia risposta menzionava questo problema github:

https://github.com/angular-ui/ui-router/issues/562

Ma questo è un problema un po ‘separato, che mostra in particolare un modale di uno stato su un altro stato senza che lo stato non modale cambi. Ho provato la patch in quel problema, ma è chiaro che non è pensata per impedire all’intero stato di ricaricarsi sulla modifica degli URL.

Aggiornamento del 19 maggio 2015

A partire da ui-router 0.2.15, il problema del ricaricamento dello stato sulle modifiche ai parametri di query è stato risolto. Tuttavia, il nuovo aggiornamento ha interrotto le funzionalità di back e forward dell’API della cronologia con i parametri di query. Non sono stato in grado di trovare una soluzione per questo.

Originale

La risposta di Jay non ha funzionato per me, e neanche una tonnellata di altre risposte. Cercare di ascoltare $locationChangeStart causato problemi durante il tentativo di andare avanti e indietro nella cronologia del browser perché mi avrebbe causato l’esecuzione di codice due volte: una volta quando il nuovo stato è cambiato e un altro perché $loationChangeStart .

Ho provato a utilizzare reloadOnSearch=false , ma questo ha impedito cambiamenti di stato anche quando il percorso reloadOnSearch=false cambiato. Quindi alla fine ho potuto farlo funzionare come segue:

Quando si modifica $location.search() per aggiornare i parametri della query, utilizzare un “hack” per distriggersre temporaneamente il ricaricamento sulla ricerca, impostare i parametri di ricerca, quindi ritriggersre il ricaricamento.

 $state.current.reloadOnSearch = false; $location.search('query', [1,2]); $timeout(function () { $state.current.reloadOnSearch = undefined; }); 

Ciò garantirà che le modifiche ai parametri della query non ricarichino lo stato e che le modifiche del percorso dell’URL ricaricheranno correttamente lo stato.

Tuttavia, questo non ha consentito alla cronologia dei browser di modificare lo stato (necessario per sapere quando un parametro di query cambia per rileggere l’URL) quando un parametro di query faceva parte dell’URL. Quindi ho anche dovuto aggiungere il nome di ciascun parametro di query alla proprietà url dello stato .

 $locationProvider.html5Mode(true); $stateProvider .state('home', { url: '/?param1&param2&param3', templateUrl: 'home.html', controller: 'homeCtrl as home', }); 

I nomi dei parametri sull’URL sono facoltativi quando vengono elencati in questo modo, ma eventuali modifiche a tali nomi dei parametri ricaricheranno lo stato quando si preme il pulsante Indietro e Avanti sul browser.

Spero che altri lo trovino utile e non ci vogliono più giorni per capire come farlo (come ho fatto io).