Browser History: skip abstract state

Question

Browser back button navigation works as expected, but upon encountering an abstract state, it resolves to the original state (which is necessarily a child of the abstract state being navigated to).

Is there a way within angular-ui-router to suppress abstract states from being added to the history?

Not really clear what issue is. Provide simple routing layout and reference that with regard to behavior seen or expected — charlietfl, Jun 08 '16 at 23:40
State 'a' is a regular state. State 'a.b' is an abstract state. State 'a.b.c' is a regular state. When in state a.b.c, back navigation goes to state a.b, which, being abstract, rejects the transition and returns the user to state a.b.c. Desired functionality would be to be able to have the back button navigation from a.b.c go through to a. — steve_baer, Jun 09 '16 at 00:05
Can you provide the ui router code for states where this occurs? — Larry Turtis, Jun 09 '16 at 00:21

score 1 · Accepted Answer · edited May 23 '17 at 11:52

Have the same problem. I hope it will help you How do I get the Back Button to work with an AngularJS ui-router state machine?

It's a little bit hard for me and it seems there must be a simpler solution

Edit: I did it. First of all you need your old state (also we have wrapper for localstorage, so you should change methods).

angular
    .module('app')
    .run(appRunFunction);

appRunFunction.$inject = ['$rootScope', 'localstorage'];

function appRunFunction($rootScope, localstorage) {
    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParam, fromState, fromParam) {
      localstorage.setValue('lastState', fromState.name);
    });
};

We also have written a service that redirects from an abstract state to regular state after comparison your next regular state with your last one

angular
.module('app.services')
.factory('states', states);

states.$inject = ['$state', 'localstorage'];

function states($state, localstorage) {
  var service = {reloadWithParam: reloadWithParam};
  return service;

  function reloadWithParam(param, value) {
    var fromState = localstorage.getValue('lastState') + '.' + localstorage.getValue('lastPage');
    var toState = $state.current.name + '.' + value;
    var paramObject = {};
    paramObject[param] = value;

    if (fromState === toState) {
      window.history.go(-1);
    } else {
      $state.go($state.current, paramObject, { notify: false});
      localstorage.setValue('lastPage', value);
    }
  }
}

Browser History: skip abstract state

1 Answers1