Child default state issues with the ui-sref & URL

[CMCDragonkai]

In the FAQ https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-set-up-a-defaultindex-child-state

For option 1, you can add a default child state by making the parent state abstract and adding a url to the parent state and allowing the default child state an empty url so it can inherit the parent url and match the parent state's url.

The option 2 is redirection.

$stateProvider.state(
    'parentState',
    {
        abstract: true,
        url: '/parent/child',
        template: '<p>Parent <ui-view /></p>',
        controller: function() {}
    }
).state(
    'parentState.childState',
    {
        url: '',
        template: '<span>Child</span>',
        controller: function(){}
    }
);

However when you go about trying to transition to it such as using ui-sref, it can no longer transition to the parent state anymore. (This is because the parent state is an abstract state).

These things don't work:

<a ui-sref="parentState></a>
OR
$state.go("parentState");

These however work:

<a ui-sref="parentState.childState></a>
$state.go("parentState.childState");

It seems non-intuitive to go about setting up a default childstate and then in the process lose the ability to transition to the parent state. If I could just setup a default childstate, and then transition to the parent state, ui-router should be able to just fallback onto the default child state. I shouldn't need to explicitly set the childstate that I want to go to. What if I want to change what my default child state is? Now all my state declarations need to change!

The option 2 of this child state setup opens up possibility of duplicate content. If you combine option 2 with removing abstract:true from the parent state, and have the child state have its own url segment, then it is a possible solution to the above problem. But surely hardcoding redirection should not be required.

[timkindberg]

I'd wanted this a long time ago, but it kept getting shot down. I agree that we should be able to transition to an abstract state if it has a default child, that's just my opinion though.
See #27

[nateabele]

I'll think about it. Might just be a matter of how to work it into the API cleanly.

[delwyn]

Would be great if this could be added.

[goleafs]

This caught me for the past few days... I would definitely endorse a fix.

I did it slightly different, using a redirect. So, to follow the initial example:
$urlRouterProvider.when('/parent', '/parent/child');

ui-sref to 'parent' does not work

HOWEVER
when you manipulate the address bar manually
http://..../parent (which is identical to what shows up as the target for a ui-sref)
it successfully goes to
http://..../parent/child

... pretty inconsistent behavior.

[charandas]

+1 "ability to transition to an abstract state with default child"

[what-is-a-crow]

+1, for what it's worth. Not being able to do this makes for some gnarly ui-srefs.

[jeffszusz]

+1

[blah238]

+1, just got bit by this

[12hys]

+1

Currently trying to use active navigation using "ui-sref-active" with child states. If the parent state is abstract and a nav button, we lose the ability to use ui-sref-active.

[pdwinkel]

+1

[fransvelocity]

+1

[soncodi]

+1

[tamakisquare]

+1 for better consistency in the concept of default child state.

[stocksr]

+1
Currently trying to use active navigation using "ui-sref-active" with child states. If the parent state is abstract and a nav button, we lose the ability to use ui-sref-active.

[slessans]

You can use this to work around this problem (especially the ui-sref-active problem):

$stateProvider.state('parentState', {
    url: '/parent',
    views: {
        '': {
            template: '<p>Parent <ui-view /></p>',
            controller: function() {}
        },
        '@parentState': {
            template: '<span>Child</span>',
            controller: function(){}
        }    
    }
});

Note: the state /parent/child is no just /parent

[iven]

@slessans
Doesn't seem to work:

      .state 'admin.cluster',
        url: '/clusters/{cluster_id}'
        views:
          '':
            template: JST['templates/admin/cluster']
            controller: 'AdminClusterCtrl as cluster'
          '@admin.cluster':
            template: JST['templates/admin/cluster/index']
            controller: 'AdminClusterCtrl as cluster'
      .state 'admin.cluster.master',
        url: '/masters/{master_id}'
        template: JST['templates/admin/cluster/master/index']
        controller: 'AdminMasterCtrl as master'

and

        <a class="list-group-item" ng-repeat="cluster in admin.clusters" ui-sref="admin.cluster({cluster_id: cluster.id})" ui-sref-active="active">

Still ui-sref-active only work in the parent state.

[slessans]

@iven if ui-sref-active only works for the parent state, make sure you are on the most recent version of ui-router

[iven]

@slessans You're right. I was using 0.2.8.

[bsiddiqui]

+1

[chatoo2412]

+1

[mogelbrod]

+1, being unable to use ui-sref for abstract parents is really problematic.

[harryjoy]

+1

Just got caught into this.

[mgrinko]

+1

[chrislambe]

+1

[javialon]

+1

[rriemann]

👍

[raphaelluchini]

+1

[cykoder]

+1

[ermakovich]

Yes, please make it's possible to use abstract states with ui-sref

[ChrisMondok]

+1

[eddiemonge]

Lots of interest in seeing this done. @nateabele @timkindberg is this a feature that you are still willing to accept a PR for?

[christopherthielen]

For now, don't declare your state abstract, and use this recipe:

 app.run($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
  }

---

  $stateProvider.state('parent' , {
      url: "/parent",
      templateUrl: "parent.html",
      redirectTo: 'parent.child'
  });
  $stateProvider.state('parent.child' , {
      url: "/child",
      templateUrl: "child.html"
  });

[eddiemonge]

@christopherthielen that seems to work pretty well. Why not make that part of ui-router?

[christopherthielen]

@eddiemonge something pretty similar will likely make it in

See #1235

[wefarrell]

+1

[jswhisperer]

@christopherthielen +1 fixed my issue

[anonomis]

+1

[ghost]

+1

[SpeedShifter]

+1

[alexhoo]

+1 (@christopherthielen pretty clever )

[UrVerySpecial]

+1
thanks a lot!

[mattobee]

+1

[fynnfeldpausch]

+1

[invernizzie]

+1

[diegogurgel]

@christopherthielen Thanks 👍

[amazingandyyy]

+11