0

My angular app's content creation flow is being broken by androids and browsers physical buttons which take the user to where they came from instead of previous step in the process. I tried fixing it with locationChangeStart as well as few other similar events, but they all get triggered both by my "Continue" buttons as well as physical "back" buttons.

Is there a way to trigger an event only when user presses browsers/android's back button, or alternatively to know if locationChangeStart was triggered by the back button vs app's button? If possible, I would like avoid adding jQuery as we are not currently using it.

Nimbrod
  • 57
  • 11
  • Show your code to us. – lv0gun9 Feb 13 '15 at 12:09
  • What would you like to see, my whole app?:p It's a general question, locationChangeStart gets triggered regardless of what source. I need to detect back button only. I am not sure what I can provide that would be relevant to the question. – Nimbrod Feb 13 '15 at 12:18
  • try this : http://stackoverflow.com/questions/12381563/how-to-stop-browser-back-button-using-javascript – lv0gun9 Feb 13 '15 at 13:49
  • Thanks for your suggestion! But here comes the second issue, this would also get triggered when user is trying to navigate forward from the page, as I mentioned in my question. If I am to use any kind of events that keep track of user leaving the page, or location change, I need to be able to differentiate whether they are triggered by back button or my "continue" button. – Nimbrod Feb 13 '15 at 13:59

1 Answers1

0

I gave up on trying to detect the user pressing back button and act on it. Instead, make it the default action and change the way our buttons behave. I detect when user is pressing one of our buttons and set a variable based on it.

    var navigating = false;

    $scope.$on('$locationChangeStart', function(event) {
        if($scope.global.application="new-ad" && !navigating){
            event.preventDefault();
            $scope.areYouSure = true;
        }
    });
    $scope.nextStep = function() {
        navigating = true;
        $location.url('/step-two');
    }

Basically, we first set our variable to false, and if the user presses physical back, it will display the prompt alerting user they will lose their work. However, if the user instead uses our "continue" button, also triggering the locationChange, it will set variable to true, letting the app know what the locationChange is triggered from within the app and allowing it to continue.

Nimbrod
  • 57
  • 11