Proper work of "ui-sref-active"

[Kirill-Johnson]

/app/assets/javascripts/spa-demo/layout/navbar/navbar.html

Perhaps the following
<ul class="dropdown-menu"> <li ui-sref-active="active"> <a ui-sref="authn">Authentication Check</a></li> <li ui-sref-active="active"> <a ui-sref="images({id:null})">Images</a></li> <li ui-sref-active="active"> <a ui-sref="tags({id:null})">Tags</a></li> <li ui-sref-active="active"> <a ui-sref="things({id:null})">Things</a></li> </ul>

Should be fixed as this:
<ul class="dropdown-menu"> <li ui-sref-active="active"> <a ui-sref="authn">Authentication Check</a></li> <li ui-sref-active="active"> <a ui-sref="images">Images</a></li> <li ui-sref-active="active"> <a ui-sref="tags">Tags</a></li> <li ui-sref-active="active"> <a ui-sref="things">Things</a></li> </ul>

In your example "ui-sref-active" works properly only for the first link, but not for the others. It seems "({id:null})" makes not much sense, but removing it makes styling working properly.

Thanks.

[ejavaguy]

It seems "({id:null})" makes not much sense
If you are on state /images/1 and select "Images", you need to set the id=>null to get to the collection versus instance state.

removing it makes styling working properly
Not sure what you specifically mean by that -- but functionally it seems needed.

Give it a try
1)

            <li ui-sref-active="active">
                <a ui-sref="images({id:null})">Images(null)</a></li>
            <li ui-sref-active="active">
                <a ui-sref="images">Images</a></li>

2. Navigate to an Image
   http://localhost:3000/#/images/1

3. Click on Image option without {id:null}
   You stay on the current image state

4. Click on Image option with {id:null}
   You navigate to the collection state

[ejavaguy]

removing it makes styling working properly
Not sure what you specifically mean by that
I see now what you mean by styling. The option is not showing up as the current state/active. It is something I will have to look into, but I am first learning towards the functionality it provides with {id:null} versus the not being able to navigate to where I want to go

thanks!

[Kirill-Johnson]

Yes, indeed it makes some sense.

You get right what I mean by styling. When you click to images({id:null}) and you are in images state, this link is not highlighted. But if you use link without "({id:null})", this styling works properly.

Perhaps there is a solution to keep both properties.

[ejavaguy]

I did do a minor amount of reading and it appears to be an old issue (angular-ui/ui-router#704) that there are solutions for. I will keep this report open and address it after the end of the course -- to keep things consistent.
thanks!

[Kirill-Johnson]

I figured out how to solve this.
Try this syntax:
<li ui-sref-active="{'active': 'images'}">

[ejavaguy]

Awesome! Just tried it.
I may try to get this in during module 7.
thanks again

[ejavaguy]

Closing issue -- fix added to module#7, lesson 1 baseline

thanks