Jak wykrywać zdarzenie click click w przeglądarce za pomocą kątowego?

Question

Czy można wykryć, że użytkownik wszedł na stronę za pomocą przycisku wstecz w swojej przeglądarce? Najlepiej chcę wykryć tę akcję przy użyciu pliku angular.js.

Nie chcę używać trasowania kątowego. Powinno to również działać, jeśli użytkownik przesyła formularz, a po pomyślnym przesłaniu go na serwer i ponownym przekierowaniu, powinno to być również możliwe, jeśli użytkownik powróci do formularza za pomocą przycisku Wstecz w przeglądarce.

Answer 1

Oto rozwiązanie z 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?'); 
     } 
    }); 
}); 

Używam bloków do uruchomienia tego. Najpierw przechowuję rzeczywistą lokalizację w $ rootScope.actualLocation, a następnie słucham $ locationChangeSuccess, a kiedy to się dzieje, aktualizuję actualLocation z nową wartością.

W $ rootScope obserwuję zmiany w ścieżce lokalizacji i jeśli nowa lokalizacja jest równa priorLocation, ponieważ $ locationChangeSuccess nie została uruchomiona, co oznacza, że ​​użytkownik ponownie użył historii.

Answer 2

JavaScript ma obiekt historii natywnej.

window.history 

Sprawdź MDN, aby uzyskać więcej informacji; https://developer.mozilla.org/en-US/docs/DOM/window.history?redirectlocale=en-US&redirectslug=window.history

Nie jestem pewien, czy dobrze działa na wielu przeglądarkach.

Aktualizacja

Wydaje co ja o nazwie powyżej jest tylko dla przeglądarek Gecko typu.

W przypadku innych przeglądarek spróbuj użyć history.js; https://github.com/browserstate/history.js

Answer 3

po naciśnięciu przycisku wstecz, kątowe pożary tylko $ routeChangeStart wydarzenie, $ locationChangeStart nie wypalił.

Answer 4

Jeśli chcesz bardziej precyzyjne rozwiązanie (z wykryciem tyłu i do przodu) I rozszerzony rozwiązania dostarczane przez Bertrand:

$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++; 

     } 

    } 

}); 

Answer 5

wiem, że to jest stary pytanie. Anyways :)

Odpowiedź Bema wygląda świetnie. Jednakże, jeśli chcesz, aby pracować z „normalnych” adresów URL (bez hash chyba), można porównać ścieżki bezwzględnej, zamiast jednej zwróconej przez $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?'); 
     } 
    }); 
}); 

Answer 6

My solutio tego problemu jest

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

Answer 7

Do rutowania ui używam poniższego kodu.

Wewnątrz App.run() użyć

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

można uzyskać wartość „” w przypadku previousState „$” stateChangeSuccess jak również następująco `jeśli chcesz.

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

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