$ state.go non sta cambiando l'Url

Question

Sto usando, Angular.js 1.3, con ui-router. Ho 3 pagine, pagina1.html, pagina2.html, pagina3.html.

Quando l'utente fa clic sulla pagina 1, la pagina 2 si aprirà, ma voglio salvare lo stato di scorrimento della pagina 1, in cui l'utente era prima di fare clic, in modo che dopo aver fatto clic sul pulsante Indietro atterra sullo stesso stato di scorrimento.

per risolvere questo ho aperto il page2.html sul page1.html, in iframe, e dandogli posizione assoluta per visualizzare il page1.html, e sto usando la:

history.pushState({}, '', '/page2.html');

per cambiare l'URL. Questa implementazione funziona bene.

Ora quando l'utente clicca sul link page2.html, dovrebbe aprire la page3.html, come un normale link, per il quale ho usato:

$state.go("page3") 

Il problema è ora il chages statali, e pagina3 .html carica, ma url è ancora il /page2.html, l'URL non sta cambiando.

Ho anche provato:

history.pushState({}, '', '/page3.html'); 

Ancora url non cambia. Qualcuno sa perché sta succedendo.

Answer 1

Anche se la soluzione che si sta cercando di attuare è molto creativo, vorrei davvero scelto un'altra direzione.

Hai varie possibilità, ognuno dei quali si basano su caching la posizione di scorrimento da qualche parte. Ad esempio:

var scrollTopData = {}; 

function changeState (toState) { 
    var currentStateName = $state.current.name; 
    scrollTopData[currentStateName] = window.scrollY; 
    $state.go(toState); 
} 

Quindi la domanda rimane cosa fare con la posizione di scorrimento che si è memorizzata nella cache. $state.go restituisce una promessa, quindi una soluzione potrebbe essere:

var scrollTopData = {}; 

function changeState (toState) { 
    var currentStateName = $state.current.name; 
    scrollTopData[currentStateName] = window.scrollY; 

    $state.go(toState).then(function() { 
     if (toState in scrollTopData) { 
      window.scrollTo(0, scrollTopData[toState]); 
     } 
    }); 
} 

seconda dell'implementazione, si potrebbe anche usare la risposta di asgoth:

Non ho usato prima, ma ha un angolare Servizio $anchorScroll. Per ricaricare i dati, è possibile memorizzarli nella cache utilizzando $cacheFactory o archiviare i dati su un ambito più elevato.

Un'altra soluzione sarebbe utilizzare un stateChangeEvent. Per esempio:

$rootScope.$on('$stateChangeSuccess', 
    function (event, toState, toParams, fromState, fromParams) { 
     // Do magic 
    } 
); 

Il mio consiglio sarebbe quello di utilizzare la promessa restituito da $state.go.

Answer 2

Non si può avere un cambiamento di URL se si modifica il comportamento predefinito di angolare. La parte in url dopo l'hash cambia automaticamente. Non si dispone di URL che cambiano perché si forza il browser per /somepage.html

provare qualche cosa come /#somepage.html

nota il cancelletto (#), ha aggiunto qui.