$state.current is sometimes 'empty'

[panuhorsmalahti]

I encountered this strange bug today. Sometimes (I don't know why) $state.current returns an "empty" object:

There's at least two stackoverflow issues about this bug:
http://stackoverflow.com/questions/25370775/exposing-the-current-state-name-with-ui-router
http://stackoverflow.com/questions/24895908/how-do-return-the-state-current-name-from-ui-router-statechange

I can't explain the bizarre behaviour I'm seeing: When I debug $state I can see that $state.current is fine, but when I print $state.current directly I get this:

{ name: "", url: "^", views: null, abstract: true }

$state.$current.self is also the same empty object., even though it looks fine when I inspect $state.

I don't quite understand how this can be happening. How can $state and $state.current return different values? $state.current doesn't have a getter.

EDIT: Okay, the problem was that the debugger doesn't show the object when it was printed, rather it shows it's current state. Now I just need to figure out why the state is empty.

[panuhorsmalahti]

Couldn't reproduce the bug after refactoring some async code. Closing..

[cannoneyed]

Just encountered this bug tonight... we could see the proper $state.current values in the HTML but they were not accessible in the corresponding controller. Very strange!

[summer-liu]

Same here ~

[summer-liu]

I tried this and it works:
In controller:

$scope.uiState = $state

In view:

uiState.current

Or:
In controller:

$rootScope.$state = $state

In view:

$state.current

[prostoandrei]

Same thing

[nateabele]

This is the root state. This happens when your initial page load targets a nested URL that depends on a resolve. The root state is the initial state of the application pending a successful transition to the desired state. Feel free to add this to the FAQ if it was unclear to you, and you think it might confuse other people as well.

[ghost]

I don't understand.
If i console.log($state) it shows correct state, if i console.log($state.current) then it shows empty string, so how can I get current nested state ?

[prostoandrei]

@ddctd143 i think this can help you
https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#parent-property-using-state-name-string
Maybe your state dont't know anything about your parent.

[ndelvalle]

Same thing as @ddctd143 is happening to me. @nateabele what if my state doesn't have a parent and doesn't depends in a resolve?. I'm trying to get the $state.current in a directive, if i set a timeout works as i expect, if not i get the $state object with empty values. How do i wait until $state.current resolve, is there a promise?, Am i approaching this incorrectly?

[anilcse]

I faced the same issue, This is happening when I reload the page. Anyways, I used $timeout and it is working fine for me.

$timeout(function () { console.log($state.current, 'this is working fine'); }, 100);

[SmithWebster]

I have this bug too.
My opinion. We have "abstract: true" param. I think this is a base/root state which has been loaded.

[SmithWebster]

Unfortunately this is not yet supported
Answer

[last-indigo]

Anyways, I used $timeout and it is working fine for me.

I faced the same issue, but felt that $timeout is bad.
So I looked for some special event from API docs, and '$stateChangeSuccess' is what you need to get nested current state (while parent is abstract):

$scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
   // toState === $state.current
});

[nick-barth]

Thanks @last-indigo.

This solution works for states, but it doesn't work on with History events. I'll edit my comment if I figure it out.

[gimox]

+1

Ok with fake timeout.
setTimeout( () => { console.log($state.current)}, 0);

[mpellerin42]

@nateabele I understand what you said, but I don't understand how to deal with it. And the FAQ doesn't answer the question...

I need to get the current state name from a component's controller to initialise the component accordingly to the current state (when user reload the page for example). But in some cases I've got the { name: "", url: "^", views: null, abstract: true }. How to wait for the resolve of the state to be finished in that case? Events are deprecated and $transition$ is not recognize in a controller. So I don't see how to handle this kind of cases...

[grosscorporation]

resolve the target state and use the name as you like
resolveBinding: function($transition$) { console.log($transition$.to()); }