current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 8 down vote favorite
3

I have a form-like page with some data. And want to show a popup/alert when a user clicks the browser back button, asking "if they want to go back or stay on the same page". I am using angular-ui-router's $stateProvider and want to bind this only to one state/view.

share|improve this question
    
stackoverflow.com/questions/15813850/… – Sajeetharan Apr 27 '15 at 16:43
    
Hey checkout out my answer, pretty sure its the best one yet. You havent marked the right answer yet, is there anything else you are looking for in an answer? – SLearner Feb 18 at 18:37
up vote 11 down vote accepted

This is my previous answer for some another question. but it's now helps to you

You can do it by using angular $routeChangeStart

$routeChangeStart

Broadcasted before a route change. At this point the route services starts resolving all of the dependencies needed for the route change to occur. Typically this involves fetching the view template as well as any dependencies defined in resolve route property. Once all of the dependencies are resolved $routeChangeSuccess is fired.

The route change (and the $location change that triggered it) can be prevented by calling preventDefault method of the event. See $rootScope.Scope for more details about event object.

So please try this below code. 

  $scope.$on('$routeChangeStart', function (scope, next, current) {
        if (next.$$route.controller != "Your Controller Name") {
            // Show here for your model, and do what you need**
            $("#yourModel").show();
        }
    });

Update:

You need to write your functional works in the model popup. like

Put some link buttons for

  • Are you sure for go to prev page?
  • do you want stay current page?
  • Do you want logout? etc.

then Add ng-click event for go prev page, stay current page with using return false, etc.

DOES MAKE SENSE DUDE?

share|improve this answer
    
Where should I place this code? would you please provide me more detail? Because I only want to bind this behave to this view, not for other views.Thanks – linyuanxie Apr 27 '15 at 16:48
    
Thanks man !, I will try it now. – linyuanxie Apr 27 '15 at 17:11
    
I place those code in the confirmation popup Ctr, but didn't work, I think I missunderstood, something like this; angular.module('ecom.submitter.report').controller('ExitCtr'‌​, ['$scope','$location', function ($scope,$location) { $scope.$on('$routeChangeStart', function (scope, next, current) { if (next.$$route.controller != "ExitCtr") { // Show here for your model, and do what you need** alert('haha') return false; } }); }]); – linyuanxie Apr 27 '15 at 17:20
    
You need to configure $route in your controller. please add first – Ramesh Rajendran Apr 27 '15 at 17:24
    
Should we be putting this in .run() and/or using $rootScope? As per stackoverflow.com/a/15816539/339803 – redfox05 Apr 5 at 9:14
up vote 2 down vote

You'd be better off using $stateChangeStart event with angular ui router. There will be problems with $routeChangeStart as $routeChangeStart event will be triggered when the url changes.

For example:

You have 4 states, each with 2 sub-state, and each sub/state or state is not associated with a url. In such cases listening to $routeChangeStart might not work.

In the controller/view where you want to prompt the user to confirm the redirection do this.

This will be called when the state changes in your current scope (which is the view/controller that you are in)

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    //Open the modal
    $('my-modal').show();
});
share|improve this answer
up vote 0 down vote

Here is my solution

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();
    });
});
share|improve this answer
    
This will also trigger if the user clicks the Forward button or if they navigate to the last page they were on, rather than clicking the back button. – ninjaPixel Jan 26 at 13:46

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.