Passing UI-Router state params from parent to child consistently

Question

I have the following UI-Router state definitions (trimmed down to only applicable aspects for brevity):

 .state('ep.perma', {
    url: '/:permalink',
    params: {permalink: ''}, //default
    templateUrl: 'views/conference/home.html',
    controller: 'HomeCtrl'
  })

  .state('ep.perma.login', {
    url:'/login',
    templateUrl: 'views/dialogs/login.html',
    controller: 'LoginCtrl',
  })

  .state('ep.perma.register', {
    url: '/register',
    templateUrl: 'views/dialogs/register.html',
    controller: 'RegisterCtrl'
  })

The :permalink parameter in the parent ep.perma state could be anything, but let's say it's 'acb123'. The login and register states each have an sref link to toggle to the others state in their html. Everything works fine if you go to the parent ep.perma state as the url initally. You can switch between login and register all day long and the :permalink parameter is persisted.

However if you navigate to the login or register state via a URL .../acb123/login or .../abc123/register initially everything is OK. But then if you then try to switch from login to register or the other way around by (depending on which URL you went to 1st) clicking the SREF link in the html, the :permalink param reference is lost. So, it I am at .../abc123/login, the sref for register in logins html should be .../abc123/register, but is //register instead. It's there on the initial load for either URL, but not in that html sref to go directly to the other.

This only happens if going to either the login or register child state directly via URL. If I go tot the parent ep.perma URL .../abc123 initially everything is fine.

Any thoughts on why this happens and/or how to address this? I found digging around here before posting this that I can pass the param(s) via resolves from the parent then consume them in the children, but do not want to end up with .../abc123/abc123/login if not accessing directly via the url. I am also not 100% clear on how to set them in the child state (only the controller per the example here

I need for users to be able to got to either login or register via direct URL and switch between them having the initial specified :permalink parameter persist like it does if going directly to the parent as the initial URL.

TIA

Answer 1

Wanted to help, to give some idea, so there is a working plunkr. The point is, it is working as is. You can even navigate to direct url (in address bar) and it will still work:

http://run.plnkr.co/plunks/rQRG6ZpXLWADX9md1YV5/#/bara/register

Also these links would work:

<a href="#/abc123">/abc123</a>
<a href="#/abc123/login">/abc123/login</a>
<a href="#/abc123/register">/abc123/register</a>

<a href="#/def456">/def456</a>
<a href="#/def456/login">/def456/login</a>
<a href="#/def456/register">/def456/register</a>

<a ui-sref="ep.perma({permalink:'xyz789'})">
<a ui-sref="ep.perma.login({permalink:'xyz789'})">
<a ui-sref="ep.perma.register({permalink:'xyz789'})">

Check it here and try to compare what is different in your code. Or make it broken... to continue on it and fix it.