$ state.go ändert nicht die URL

Question

Ich benutze, Angular.js 1.3, mit UI-Router. Ich habe 3 Seiten, page1.html, page2.html, page3.html.

Wenn der Benutzer auf Seite1 klickt, wird Seite2 geöffnet, aber ich möchte den Bildlaufstatus von Seite 1 speichern, wo der Benutzer vor dem Klicken war, so dass er nach dem Klicken auf die Zurück-Schaltfläche auf denselben Bildlaufstatus landet.

Um dies zu lösen ich die page2.html über die page1.html, in iframe geöffnet, und es absolute Position geben die page1.html anzuzeigen vorbei, und ich bin mit dem:

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

um die URL zu ändern. Diese Implementierung funktioniert gut.

Nun, wenn der Benutzer auf den Link auf page2.html klicken, sollte es die page3.html öffnen, wie ein normaler Link, für die ich verwendet:

$state.go("page3") 

Das Problem ist jetzt der Staat chages und page3 .html lädt, aber URL ist immer noch die /page2.html, URL ändert sich nicht.

Ich habe sogar versucht:

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

Noch URL ändert sich nicht. Jeder weiß, warum es passiert.

Answer 1

Obwohl die Lösung, die Sie implementieren möchten, sehr kreativ ist, würde ich wirklich eine andere Richtung wählen.

Sie haben verschiedene Optionen, die alle darauf angewiesen sind, die Bildlaufposition irgendwo zwischenzuspeichern. Zum Beispiel:

var scrollTopData = {}; 

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

Dann bleibt die Frage, was mit der Scroll-Position zu tun, die Sie zwischengespeichert haben. $state.go gibt ein Versprechen, so eine Lösung wäre:

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]); 
     } 
    }); 
} 

Je nach Implementierung, können Sie auch die Antwort von asgoth verwenden:

Ich habe es nicht benutzt, bevor, aber Winkel hat ein $anchorScroll Service. Um die Daten erneut zu laden, können Sie sie unter Verwendung von $cacheFactory zwischenspeichern oder die Daten auf einem höheren Bereich speichern.

Eine andere Lösung wäre, eine stateChangeEvent zu verwenden. Zum Beispiel:

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

Mein Rat wäre, das Versprechen von $state.go zurück verwenden.

Answer 2

Sie können die URL nicht ändern, wenn Sie das Standardverhalten von angular ändern. Der Teil in der URL nach dem Hash ändert sich automatisch. Sie haben nicht zu ändern Urls, weil Sie den Browser zwingen

versuchen, irgendeine Sache wie /#somepage.html

Notiz /somepage.html die Raute (#) hier hinzugefügt.