AngularJs ui router can't go back when in a valid state

Question

I'm having trouble when using a directive to go back when using navigation with ui.router. As far as I know, this problem occurs because of the way the application is structured. To identify a invalid URL (or state) I have this:

$urlRouterProvider.otherwise(function($injector) {
    var $state = $injector.get('$state');
    $state.go('erro');
});

So if i try to access this url: website.com/contacttt (supose this is an invalid url/state), the ui.router is going to redirect users to the error state.

In that state, if I try to use the goBack directive, this:

element.on('click', function() {
    $window.history.back();
})

I'll be inside a loop, because the last history is the invalid one. I know I could use something like $window.history.go(-2); but this also have a weird behavior, and if users hit the forward button they'll end up on the invalid state again.

I'd like to be able to use the same directive all over my application, this is a feature present in multiple views.

Is there any other way to solve this problem?

not completely sure if this is correct...but perhaps you shouldn't use $urlRouterProvider.otherwise to go to your error state. From the docs, it seem like its used for 404 routes. Perhaps `$rootScope.$on('$stateChangeError', function(event) { $state.go(''error"); });` is what you are looking for? — derp, Aug 18 '16 at 00:06
Have you tried storing the states in an array and then go back to that state as its named? — Judson Terrell, Aug 18 '16 at 00:27
@derp I tried this, but this method does not return any errors. But only for an invalid state. If I create an invalid resolve, for example, than I got the errors correct. — celsomtrindade, Aug 18 '16 at 00:35
@JudsonTerrell I tought about that. But maybe there is a better/easier solution. — celsomtrindade, Aug 18 '16 at 00:36
@CelsomTrindade Are the error states recoverable? Ie if the error is recoverable with different inputs then it makes sense to do a history back. Otherwise if its not recoverable, maybe its better to do an "oh no, an error occurred" page. Perhaps your error page can provide these two options to the user something like "Try again" or "start over" — derp, Aug 18 '16 at 00:55
@derp what do you mean by recoverable? The problem right now is that I can't get an error on the stateChangeError because I tried to access an invalid state. Ex.: The state url is `/Contact` but I tried to access `/Contacttt`. This way there is no error, just a blank page. — celsomtrindade, Aug 18 '16 at 11:40

score 0 · Answer 1 · answered Aug 18 '16 at 00:58

0

YOu can try this, it's not perfect, but works pretty fine.

in your .run() save your $states when they change.

myApp.run(function ($rootScope) {
            $rootScope.previousState;
            $rootScope.currentState;
            $rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
                $rootScope.previousState = from.name;
                $rootScope.currentState = to.name;
            });
        });

Then on your view of error add a button with a function.

$scope.back = function () {
            if ($rootScope.previousState !== "") {
                $state.go($rootScope.previousState);
            } else {
                //a default view to redirect in some cases this don't work
            }
        };

answered Aug 18 '16 at 00:58

Paulo Galdo Sandoval

2,173
6
27
44

It does solve the problem, but I was trying to avoid this, because it feels "manually", but if it works, it's ok. – celsomtrindade Aug 18 '16 at 11:37
Actually, after some tests I noticed this doesn't work. I mean, it does work, but it lost the purpose of the back button. Since we are not actually going back, but forward to a previous state, I can't go back in history, but only go forward to the previous state, getting inside a loop. – celsomtrindade Aug 22 '16 at 17:57
Uhm, did you see this post? maybe is what exactly you want, try it out. http://stackoverflow.com/a/8067539/5697445 – Paulo Galdo Sandoval Aug 22 '16 at 23:56

AngularJs ui router can't go back when in a valid state

1 Answers1