Angularjs - handling back and forward buttons with regard to services

Question

I have several services which I'm trying to use to share data between elements of a multi-part form in angularjs. An example is one service which maintains an array of visited states and when the user clicks the provided back button the last state is popped and the page redirected along with all of the relevant fields.

However if the user uses a back button on the browser then my service still thinks it's on the following step. eg. I'm on B, I hit browser back and the template loads page A. However my current step is B in the service, my next step is C and this causes all sorts of issues.

I'd like to support back/forward but handle these issues at the same time. Any suggestions?

Answer 1

Eventually I figured out how to achieve this with ui-router and $stateParams instead of the array.

I use a run function which listens for state changes use $rootScope.$on('stateChangeStart') and if the toState name is my dynamic state then I test the from and to steps and see if they are valid based on a routing table I have in a service. If the steps are invalid for some reason then I clear data and redirect to step one of the form.

A part of this was handling refreshes, in order to test this check if the fromState.url = "^" and set a rootScope variable. If your variable doesn't exist and fromstate is "^" then you should redirect. This prevents refreshing breaking the implementation and also infinite refresh loops