How to detect browser back button click event using angular?

by

Here is a solution with 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?');
        }
    });
});

I am using a run block to kickstart this. First I store the actual location in $rootScope.actualLocation, then I listen to $locationChangeSuccess and when it happens I update actualLocation with the new value.

In the $rootScope I watch for changes in the location path and if the new location is equal to previousLocation is because the $locationChangeSuccess was not fired, meaning the user has used the history back.

More Related Contents:

  1. What is Hungarian Notation? [duplicate]
  2. “Thinking in AngularJS” if I have a jQuery background? [closed]
  3. How do I POST urlencoded form data with $http without jQuery?
  4. ng-repeat finish event
  5. AngularJS – Any way for $http.post to send request parameters instead of JSON?
  6. What is the $$hashKey added to my JSON.stringify result
  7. How to trigger ngClick programmatically
  8. How to make a directive update ng-model on jquery on event?
  9. AngularJS: How to run additional code after AngularJS has rendered a template?
  10. How can I make an AngularJS directive to stopPropagation?
  11. How to use jQuery in AngularJS
  12. Using Jquery Datatable with AngularJs
  13. Format input value in Angularjs
  14. Disable Chrome strict MIME type checking
  15. Should we use jQuery with AngularJS? [closed]
  16. Skip ng-repeat JSON ordering in Angular JS
  17. Consider marking event handler as ‘passive’ to make the page more responsive
  18. ScrollTo function in AngularJS
  19. VueJs templating. How to load external templates
  20. Remove ‘All Files’ option from HTML file input
  21. Easy dom manipulation in AngularJS – click a button, then set focus to an input element
  22. How to implement hierarchical multilevel datatable in javaScript?
  23. Run jQuery code after AngularJS completes rendering HTML
  24. ng-mouseover and leave to toggle item using mouse in angularjs
  25. Call angularjs function using jquery/javascript
  26. AngularJS: lazy loading controllers and content
  27. Is it a bad practice to use jQuery in Angular? [closed]
  28. How is AngularJS different from jQuery
  29. Angular.js ng-repeat across multiple elements
  30. AngularJS event on window innerWidth size change

Leave a Comment