ui-sref, abstract states and ui-sref-active

[CSchulz]

I am using an abstract state to define an URL hierarchy. The abstract state is used as parent of a drop-down menu and should route to some child page. Using ui-router 0.3.1.

My menu:

<li class="dropdown" ui-sref-active="active" ui-sref="administration">
    <a ui-sref="administration.user.list" class="dropdown-toggle" data-hover="dropdown">administration</a>
    <ul class="dropdown-menu">
        <li ui-sref-active="active"><a ui-sref="administration.user.list">users</a></li>
        <li ui-sref-active="active"><a ui-sref="administration.group.list">groups</a></li>
    </ul>
</li>

When I click on the administration entry, it shows me Error: Cannot transition to abstract state 'administration' and change to administration.user.list.

I can fix it with removing ui-sref="administration" for the first li, but then there is no hightlighting for the root entry anymore if I select groups.

Is there any way to use abstract states to highlight nav entries?

[christopherthielen]

interesting timing... I just implemented your feature request in the Angular 2 codebase for the uiSrefStatus directive.

In ng1, your options are to use the new ui-sref-active="{ cssClass: 'globstring' }" syntax. It doesn't seem to be generated properly inthe docs, but read the JSDoc: https://github.com/angular-ui/ui-router/blob/6ac1c61/src/stateDirectives.js#L267-L279

[CSchulz]

Hum for ng1 it doesn't work:
<li class="dropdown" ui-sref-active="{'active': 'administration.*'}">

Found my mistake, you have to place * for each level:
ui-sref-active="{'active': 'administration.*.*'}"

It would be good if there is a possibility to annotate different levels with * or other sign.

[christopherthielen]

use ui-sref-active="{'active': 'administration.**'}"
With globs, a single star matches states at one level. Two stars match any nested states.

[CSchulz]

Thanks for your fast reply. I am not sure, but I think it wasn't covered in the doc.

[christopherthielen]

I am not sure, but I think it wasn't covered in the doc.

Youre right, the docs for glob syntax are very very poor.

[christopherthielen]

Docs for glob are improved now 👍 https://ui-router.github.io/ng1/docs/latest/classes/core.glob.html

[pselden]

Can globs be applied to match multiple unrelated states? I want an "active" link if any child state matches from 2 different parent root states.

Ex: <span ui-sref-active={'active': 'store.**|cart.**'}></span> where the link should become active when both store or cart routes are active.

[JewelsJLF]

+1 I also need to be able to match on multiple unrelated child states... can this be done?

[Cptcecil]

I am still having an issue with this. I've used your solution and it works great. However, when I try to do something like this:

ui-sref-active="{'active' : '{{$ctrl.section.routeParent}}.**'}"

it doesn't work. $ctrl.section.routeParent is resolving correctly, I've checked the source. When I type it in manually, it works. The element looks exactly the same in the source after using both methods.

[petermcneely]

For anyone who runs into what @Cptcecil ran into:

move the logic to discern what the active route should be to your controller like so:

bindings: {
    section: '<' // assuming the section object has a routeParent property.
},
controller: function () {
    var self = this;
    ...
    self.getActiveCondition = function () {
        return {
            'active': self.section.routeParent + '.**'
        };
    }
    ...
}

And then your html should use ui-sref-active="$ctrl.getActiveCondition()". ui-router should evaluate the function here using the values from the scope of your controller.