1

In my angular app, I have this issue. When user quickly double-clicks link to state (ui-sref link), the target state begins loading twice. This would be bearable, if the state window didn't freeze and stop responding to other state changes. When clicking another ui-sref links, URL changes accordingly, http calls on background are made, but the view is frozen.

I need to know, how can I prevent any transition, when there is another transition already trying to resolve promise. I know I can somehow work magic with $stateChangeStart and event.preventDefault(). What I don't know is how to allow my transition to continue after resolving it's resolve block and how to counterpart event.preventDefault().

Thanks for your time. Any advice will be greatly appreciated.

Rook
  • 13
  • 5

1 Answers1

1

Angular UI Router's $state object has a property on it, 'transition', which will be present if it is in the middle of an active transition. One option is to remove the ui-sref attribute and use a ng-click attribute instead. Inside your ng-click function, you can do a manual check for the presence of the transition object before invoking $state.go().

Before

HTML:

<a ui-sref="Root.State1">

After

HTML:

<a href="" ng-click="goToStateOne()">

JS:

scope.goToStateOne = function() {
  if (!$state.transition) $state.go('Root.State1');
}
Jeff Kynaston
  • 26
  • 2
  • This works, thanks a lot, Jeff. Although it brings a few things to deal with. Before, I was able to use `ui-sref-active="active"` to add css class to active bar. Is there any elegant way to achieve the same functionality with the new approach? The best I came up with, is to use ng-class and add another function to check for current state. Also is it good idea to create a service so I don't have to define the `goToStateOne()` function many times or is it better to place the definition in the rootscope? – Rook May 08 '17 at 15:07