Due to fix in 0.2.13 .when('/parent', '/parent/child') is not working with ui-sref

[Radim-Kohler]

I would say, that the _"fix"_ in 0.2.13, related to: Avoid re-synchronizing from url after .transitionTo, change: 19715d15 introduced a new issue. Or at least, the .when('/parent', '/parent/child') is not working for ui-sref="parent"

Description of the "issue"

As documented here: How to: Set up a default/index child state small extract:

Or if you want the 'parent.index' url to be non-empty, then set up a redirect in your module.config using $urlRouterProvider:

$urlRouterProvider.when('/parent', '/parent/index');
$stateProvider
    .state('parent', {url: '/parent', abstract: true, template: '<ui-view/>'} )
    // url '/parent/index'
    .state('parent.index', {url: '/index'} )

NOTE: in the above cite, I replaced the home in url with parent to make it more consistent

This has stopped working. There are plunkers:

Examples

There are examples of the issue with different versions:

• working with version 0.2.12
• not working with version 0.2.13
• working with rolled back version 0.2.13 - if commented out the fix mentioned above

this is the change applied in "roll back" of a fix 19715d15 0.2.13 inside of the released angular-ui-router.js

1988   ...
1989   // RKö - rollback of a fix
1990   // if (ignoreUpdate) return true;
1991    ...

Workaround without change of 0.2.13

I described how to go around here Angular UI-Router $urlRouterProvider .when not working when I click <a ui-sref=“…”>, we need eventing:

var onChangeConfig = ['$rootScope', '$state',
 function ($rootScope, $state) {

  $rootScope.$on('$stateChangeStart', function (event, toState) {    
    if (toState.name === "parent") { 
      event.preventDefault();
      $state.go('parent.index');
    }
  });

}]

Maybe this is the way to go (or please, give me better). But as mentioned below, not sure about consistency...

Question, is it an issue? or not

I can imagine that this issue would be refuesd as proper behaviour.

BUT, is it really what we want - if this will result in 2 different states:

<a ui-sref="parent">  // goes to parent
<a href="#/parent">    // goes to parent.index

[dmitriynosenko]

+1, I have the same issue.

[J22Melody]

+2

see http://stackoverflow.com/questions/27120308/angular-ui-router-urlrouterprovider-when-not-working-when-i-click-a-ui-sref

[ashjmcfox]

+1

As mentioned, this prevents redirecting URLs/states when using ui-sref. This is unfortunate as it now means I cannot upgrade past 0.2.12 since I require this functionality. I don't think we should have to clutter our $stateChangeStart event just to handle this, especially if we have multiple URL/state redirects in place. Hopefully this issue can be fixed in 0.2.14.

[adestis-ds]

+2
I have a "real world" example showing the same issue:

http://plnkr.co/edit/xyVPZePL2eV0lp8HxPBG?p=preview

it works with 0.2.12 but nOT with 0.2.13. If the new behaviour is intended I would like to know what is the recommended way for setting default states.

[christopherthielen]

People who are using .when this way: do you really want "state-based redirection"? .when is for matching a url and redirecting, and/or doing some other action. If this issue affects you, it means you are navigating using states, not url. I think what you are doing is navigating to a state (using state.go/ui-sref), but you really want to navigate to some other state (usually a substate).

In UI-Router the state is the primary focus, and the URL that maps to that state is secondary. In my eyes a state-based redirect is preferable to a url based one. Url redirection is more very loosely coupled and feels sloppy when compared to state-based redirection.

Read my analysis of the "double transition" problem here: #1573. As noted in the issue, avoiding re-sync is a safety net to avoid double-transitions. However, the primary fix is to ensure that all state-to-url mappings are bi-directional.

As such, since state based redirection using $stateChangeStart in 0.2.x is rather clumsy, I'm going to comment out the "avoid resync" logic for 0.2.14. I'm going to reintroduce it in 1.0 when we have a better state-level redirection API. If there are any other use cases that aren't "state-level redirection", please inform me so I make sure to account for them.

[rguldener]

+1 same problem

As for the use case: Better (i.e. non-central) state forwarding would be very welcome, also using the urlRouterProvider based forward for what really should be a state forward. The parent state is just a placeholder for us (which when called should redirect to a default child state) and we reference it in ui-sref to get "automagically" correct setting of the active class in the navigation. Since we have this use case in many places of our app we do not want to clutter the $stateChangeStart function with state redirects and thus opted to use $urlRouterProvider.

[RobiFerentz]

👍

Same issue!

[yaru22]

If this issue affects you, it means you are navigating using states, not url. I think what you are doing is navigating to a state (using state.go/ui-sref), but you really want to navigate to some other state (usually a substate).
@christopherthielen

For me, the reason I navigate to a parent state rather than its substate directly is because of ui-sref-active.

For example, I have a side menu item associated with, let's say, app.settings state that needs to be highlighted (with .active class) when I go to any of its substates (e.g. app.settings.a, app.settings.b, app.settings.c). app.settings state is just a common state encompassing those substates. So my html looks like:

<div ui-sref-active>
  <a ui-sref="app.settings">Settings</a>
</div>

When I click on Settings link, I want it to redirect me to the first substate (i.e. app.settings.a ) automatically. If I put app.settings.a directly in ui-sref above, Settings menu item will only be highlighted when the app is in app.settings.a but not when it's in app.settings.b or app.settings.c.

Maybe there is a better way of using ui-sref-active that I'm not aware of? Another workaround is using ng-class with $state.includes(), but I was hoping to make it work with ui-sref/ui-sref-active alone.

So if I want to keep <a ui-sref="app.settings">Settings</a> and have it redirect me to app.settings.a, I need $urlRouterProvider.when() work as before.

If there is a better way to handle the case above, I'd like to know as well. Thanks.

[fubupc]

@yaru22 +1

Exactly the same scenario here!

[jeverden]

+1 Same issue

[squadwuschel]

+1