Calling $state.go from parent state controller to current state causes URL to not be updated.

[tom5760]

First, the Plunker.

I'm running into a small problem where calling $state.go() from a parent state controller, which may sometimes go to the current state, not updating the URL.

The usage is for a multi-step wizard process, where I have each step as a separate state/view/controller, with a parent state/view/controller with some minimal logic. One thing it tries to do is redirect to the first step if somehow someone initially goes to the URL of an intermediate step:

    .controller('WizardBaseCtrl', function ($state) {
        // Always go to the first step of the wizard, regardless of where you are coming from.
        $state.go('wizard.start');

In the case where the app is already transitioning from somewhere to wizard.start, the URL is not updated from where it was originally.

In the Plunkr, if from any of the states, you click the link for Bar One, the location will not be updated.

Any thoughts? Thanks!

[nicksmetBagaar]

Hello, I've got the same problem.

I've got a parent view with 3 buttons linked to 3 children views. When i change views it works for 2 and changes the URL, but it won't change the url for the initial view.

Is there more known about the solution for this problem ?

[tom5760]

I believe you can work around it by doing something like:

if (!$state.is('foo')) {
    $state.go('foo');
}

[philjones88]

Same issue. Doing the above doesn't seem to do anything.

[evuolas]

I have the same issue and don't understand what is causing this, but I think it has something to do with angular's $location service that ui-router is using internally.

As suggested in one issue in angular.js project (angular/angular.js#11075) I wrapped my $state.go('foo') call inside $timeout and now my URL gets updated as expected.

$timeout(function() {
  $state.go('foo');
}, 0);

[ShayMatasaro]

adding timeout fixed the url issue(it doesnt reset to the base url), but now browser back resets to base url instead of the correct one

[jasonaibrahim]

I was having the issue, updating to the latest version solved it. However, now I am having a different problem.

The state does not transition to the state I specify, instead it goes to the first child state defined under an abstract state. Here is an example.

I have the following states defined in my app:

$stateProvider
        .state('root', {
            url: '/',
            abstract: true,
            template: '<ui-view></ui-view>',
            controller: 'ApplicationController as application'
        })
        .state('root.index', {
            url: '',
            parent: 'root',
            templateUrl: 'templates/index.html'
        })
        .state('root.splash', {
            url: '',
            parent: 'root',
            templateUrl: 'templates/marketing/splash.html'
        })
         .state('join', {
            url: '/join',
            controller: 'RegistrationsController as newUserRegistration',
            templateUrl: 'templates/marketing/join.html'
        })
        .state('login', {
            url: '/login',
            controller: 'SessionsController as newUserSession',
            templateUrl: 'templates/marketing/login.html'
        })

In my controller, I want to navigate to root.index

function createSession(user) {
        if (user && user.email && user.password) {
            $http.post('/login', {user: user}).success(function (user) {
                setCurrentUser(user);
                $state.go('root.index');
            });
        }
    }

The url updates correctly, however the state that gets loaded is root.transition instead of root.index

[JobaDiniz]

I have the same problem hehe.. and it's a wizard steps use case as well 😃

[christopherthielen]

This seems to have been fixed in 0.2.15.
http://plnkr.co/edit/lSghHi16oIX3dhYIa6kC?p=preview

If this is still an issue for you, please open a new issue and provide a plunker.