浏览器历史记录:跳过抽象状态
问题原因:在使用AngularJS的ui-router状态机时,点击浏览器的返回按钮无法返回到上一个状态。
解决方法:首先,在应用的运行阶段添加一个事件监听器,监听状态变化的成功事件。当状态变化时,将上一个状态的名称存储在本地存储中。代码如下:
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); }); };
其次,编写一个服务,用于在抽象状态和常规状态之间进行重定向。首先,比较下一个常规状态和上一个状态是否相同,如果相同,则使用window.history.go(-1)返回上一页;如果不相同,则使用$state.go()方法进行重定向,并将新的状态值存储在本地存储中。代码如下:
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); } } }
以上就是解决该问题的原因和解决方法。