Wie erkennt man das Ereignis "Zurück-Schaltfläche" des Browsers mithilfe des Winkels?

Ist es möglich zu erkennen, dass ein Benutzer eine Seite über die Schaltfläche "Zurück" in seinem Browser eingegeben hat? Am besten möchte ich diese Aktion mit angle.js erkennen.

Ich möchte kein Winkelrouting verwenden. Es sollte auch funktionieren, wenn ein Benutzer ein Formular sendet und nach einer erfolgreichen Übermittlung an den Server und einer Umleitung sollte es auch möglich sein, wenn der Benutzer über die Schaltfläche "Zurück" des Browsers zum Formular zurückkehrt.

Hier ist eine Lösung mit Angular.

myApp.run(function($rootScope, $route, $location){
   //Bind the `$locationChangeSuccess` event on the rootScope, so that we dont need to 
   //bind in induvidual controllers.

   $rootScope.$on('$locationChangeSuccess', function() {
        $rootScope.actualLocation = $location.path();
    });        

   $rootScope.$watch(function () {return $location.path()}, function (newLocation, oldLocation) {
        if($rootScope.actualLocation === newLocation) {
            alert('Why did you use history back?');
        }
    });
});

Ich benutze einen Run-Block, um dies zu starten. Zuerst speichere ich den tatsächlichen Speicherort in $ rootScope.actualLocation, dann höre ich $ locationChangeSuccess ab und aktualisiere in diesem Fall den tatsächlichen Speicherort mit dem neuen Wert.

Im $ rootScope achte ich auf Änderungen im Speicherortpfad. Wenn der neue Speicherort dem vorherigen Standort entspricht, wurde $ locationChangeSuccess nicht ausgelöst, was bedeutet, dass der Benutzer den Verlauf zurück verwendet hat.

Wenn Sie eine präzisere Lösung wünschen (Hin- und Her erkennen), habe ich die von Bertrand gelieferte Lösung erweitert :

$rootScope.$on('$locationChangeSuccess', function() {
    $rootScope.actualLocation = $location.path();
});


$rootScope.$watch(function () {return $location.path()}, function (newLocation, oldLocation) {

    //true only for onPopState
    if($rootScope.actualLocation === newLocation) {

        var back,
            historyState = $window.history.state;

        back = !!(historyState && historyState.position <= $rootScope.stackPosition);

        if (back) {
            //back button
            $rootScope.stackPosition--;
        } else {
            //forward button
            $rootScope.stackPosition++;
        }

    } else {
        //normal-way change of page (via link click)

        if ($route.current) {

            $window.history.replaceState({
                position: $rootScope.stackPosition
            });

            $rootScope.stackPosition++;

        }

    }

 });

Für das UI-Routing verwende ich den folgenden Code.

Im Inneren App.run()verwenden

 $rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) 
 {

    if (toState.name === $rootScope.previousState )
       { 
          // u can any 1 or all of below 3 statements
         event.preventDefault();  // to Disable the event
         $state.go('someDefaultState'); //As some popular banking sites are using 
         alert("Back button Clicked");

       }
 else
      $rootScope.previousState= fromState.name;
   });

Sie können den Wert 'previousState' im Ereignis '$ stateChangeSuccess' auch wie folgt abrufen, wenn Sie möchten.

    $rootScope.$on("$stateChangeSuccess", function (event, toState, toParams, fromState, fromParams) 
   {

        $rootScope.previousStatus = fromState.name;
    });

Ich weiß, dass es eine alte Frage ist. Sowieso :)

Bemas Antwort sieht gut aus. Wenn Sie jedoch möchten, dass es mit "normalen" URLs funktioniert (ohne Hash, denke ich), können Sie den absoluten Pfad vergleichen, anstatt den von $location.path():

myApp.run(function($rootScope, $route, $location){
//Bind the `$locationChangeSuccess` event on the rootScope, so that we dont need to 
//bind in induvidual controllers.

    $rootScope.$on('$locationChangeSuccess', function() {
        $rootScope.actualLocation = $location.absUrl();
    });      

    $rootScope.$watch(function () {return $location.absUrl()}, function (newLocation, oldLocation) {
        if($rootScope.actualLocation === newLocation) {
            alert('Why did you use history back?');
        }
    });
});

JavaScript hat ein natives Verlaufsobjekt.

window.history

Überprüfen Sie das MDN für weitere Informationen; https://developer.mozilla.org/en-US/docs/DOM/window.history?redirectlocale=de-US&redirectslug=window.history

Ich bin mir nicht sicher, wie gut die Unterstützung für mehrere Browser ist.

Aktualisieren

Das, was ich oben genannt habe, scheint nur für Browser vom Typ Gecko zu gelten.

Versuchen Sie für andere Browser zu verwenden history.js; https://github.com/browserstate/history.js

Also habe ich die Antwort von @Bema in TypeScript transkribiert und so sieht es aus:

namespace MyAwesomeApp {
    // ReSharper disable once Class
    function detectBackButton(
        $rootScope: ng.IRootScopeService,
        $location: ng.ILocationService
    ) {
        let actualLocation: string = '';

        $rootScope.$on('$locationChangeSuccess',
            () => {
                actualLocation = $location.path();
            });

        $rootScope.$watch(() => $location.path(),
            (newLocation: string, oldLocation: string) => {
                if (actualLocation === newLocation) {
                    //$rootScope.$broadcast('onBackButtonPressed', null);
                }
            });
    }

    detectBackButton.$inject = [
        '$rootScope',
        '$location'
    ];

    angular
        .module('app')
        .run(detectBackButton);
}

Wir müssen keine Eigenschaft außerhalb des $rootScopeDienstes erstellen, sondern können nur unseren Code "Erfolg beim Ändern vor Ort" und " Vor Ort geändert" über der lokalen actualLocationVariablen schließen. Von dort aus können Sie wie im Originalcode tun, was Sie möchten. Ich für meinen Teil würde in Betracht ziehen, ein Ereignis zu senden, damit einzelne Controller alles tun können, was sie müssen, aber Sie könnten globale Aktionen einschließen, wenn Sie müssten .

Vielen Dank für die großartige Antwort, und ich hoffe, dies hilft anderen Typoskript-Benutzern da draußen.

Mein Solutio zu diesem Problem ist

app.run(function($rootScope, $location) {
    $rootScope.$on('$locationChangeSuccess', function() {
        if($rootScope.previousLocation == $location.path()) {
            console.log("Back Button Pressed");
        }
        $rootScope.previousLocation = $rootScope.actualLocation;
        $rootScope.actualLocation = $location.path();
    });
});

Beim Drücken der Zurück-Taste löst Angular nur das Ereignis $ routeChangeStart aus , $ locationChangeStart wird nicht ausgelöst.