ui-sref-active on an abstract state

问题:

I have these routes:

• .account /:email
• .account.home /:email
• .account.personal /:email/personal
• .account.settings /:email/settings

.account is an abstract state and .account.home is the default state that it would go onto.

Now if I have this link, with an ui-sref-active to add a class when it is navigated, I would do something like

<a ui-sref-active='active' ui-sref='.account.home({email: account.email})'></a>

the right element is set with an active class when it is clicked (which is was expected), but if I then clicked on .account.personal it is removed since it is not a child of .account.home but a child of .account

How can I set the ui-sref-active to remain active to the <a></a> above even I selected a different route under it? But I cannot link it to the abstract state since we cannot navigate to an abstract state?

回答1:

you have to use ui-sref-active like ng-class

<a 
    ui-sref-active='{"active": ".account({email: account.email})" }' 
    ui-sref='.account.home({email: account.email})'
>

the important part is this:

{"active": ".account({email: account.email})" }

which tells ui-router to set the active class when the current state is .account({email: account.email}) so it is now looking at the abstract state .account and not .account.home