No way to be informed of state change cancellations

[ghost]

1. I'm in state A
2. I click on a button to go to state B, $stateChangeStart is called for B.
   Immediately I click on another button to go to state A (B has some stuff to resolve, so there's time before B's UI actually starts loading)
3. B is not loaded, and $stateChangeSuccess is not called. But since we were already in A, it isn't reloaded.

I agree that this is expected behaviour but I'd like to know a state change was cancelled. $stateChangeError isn't fired either.

Imagine I was showing a loader in $stateChangeStart and hiding it on $stateChangeSuccess. In the scenario described above, my app would think a state transition was started and then it never finished. The loader would keep on loading.

Here's a plunk: http://plnkr.co/edit/Uf3nSuOIgd6zvpIniUUY?p=preview
In the plunk I've given a timeout of 10 seconds in B's resolve. So before it resolves, click on A. The above scenario plays out. Monitor the console for state change listener events.

[zhouzi]

In the current version of your plunker, the B route's resolve promise is not returned properly. I fixed it and decreased the delay to 4 seconds: http://embed.plnkr.co/2NII1wpsErGAtahUUtia/preview

I am facing the same issue. In our project, we display a loader on $stateChangeStart and hide it when the view is loaded. The problem is that, when the route is cancelled, the $stateChangeStart triggers but there is nothing noticing that it has been cancelled.

Here is an additional jsfiddle: http://jsfiddle.net/7d64zx1e/

[nateabele]

We recently merged #1844. That might fix it for you.

[zhouzi]

Thank you, it's fixed ;)

[ghost]

@zhouzi How? I used the latest release. Is $stateChangeCancel firing for you?

[zhouzi]

I don't think it has been released yet but there's just a line to copy and paste if you need it right now: https://github.com/angular-ui/ui-router/pull/1844/files#diff-230fff7c0b3ed8f0d4f2443a246fc76aR1031

This is what I did and it works as expected.

[ghost]

@zhouzi I did but still $stateChangeCancel isn't firing. Here's a plunk:

http://plnkr.co/edit/3bxakVKotEeIDVF7eBlw

In my case I'm not doing event.preventDefault(). Is that why?

[zhouzi]

I can't get your plunker to work, the assets are not loaded properly (looks like there is an issue relative to plunker). Did you try it locally? On my side, I do receive the $stateChangeCancel event properly.

[ghost]

@zhouzi I Yeah I tried locally. Didn't work.

[zhouzi]

Actually a $stateChangeCancel event is triggered when explicitly calling event.preventDefault(). In your case, the change is not really cancelled but resolves at a later time. It's a bit different and you are right, $stateChangeCancel doesn't solve your issue.

I have uploaded a demo of the $stateChangeCancel there: http://gabinaureche.com/temp/ui-router.html

[ghost]

Then what is the use of #1844? We know when we use event.preventDefault().

[zhouzi]

You know it as a developer but you still need to publish an event for the modules listening to $stateChangeSuccess. The simplest example is an auth system where you want to block access to certain pages. When a $stateChangeStart occurs you want to show a loader and hide it on $stateChangeSuccess but you'll need to hide it on $stateChangeCancel too.

[ghost]

Oh I see.

[nateabele]

I did but still $stateChangeCancel isn't firing. Here's a plunk:

@arjun-u Your plunk is using the release version, which does not contain the patch. You need to clone master and build from source.

[ghost]

@nateabele the plunk is not using the release version. I've added a script file "ui-router" with the patch. Please check again.

And how can you close the issue when an another person is saying as well that it's not working? It's not working because I'm not explicitly calling event.preventDefault()

[nateabele]

If http://plnkr.co/edit/3bxakVKotEeIDVF7eBlw is the plunkr you're talking about, I can't even get it to run.

It fails with:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

[ghost]

@nateabele I'm sorry something is wrong with Plunkr editor. It's not loading script files after you edit a saved Plunk. I've no idea why.

I created a new one: http://plnkr.co/ilpXLe7dJN8MU9TY7i11 This Plunk is working, but if you click launch in editor it is not loading script/css files and throws the same error.

Please check this. Thanks.