ui-sref-active在抽象状态下 [英] ui-sref-active on an abstract state

问题描述

我有这些路线:

• .account /:电子邮件
• .account.home /:电子邮件
• .account.personal /:电子邮件/个人
• .account.settings /:email/settings

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

.account 是一种抽象状态，而 .account.home 是它将进入的默认状态.

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

现在，如果我有此链接，并使用 ui-sref-active 在导航时添加一个类，我会做类似的事情

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>

右元素被单击时被设置为 active 类(这是预期的)，但是如果我随后单击 .account.personal ，则将其删除因为它不是 .account.home 的子代，而是 .account

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

如何设置 ui-sref-active 使其对上面的< a></a> 保持活动状态，即使我在其下选择了另一条路线也是如此?但是我无法将其链接到抽象状态，因为我们无法导航到抽象状态?

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?

推荐答案

您必须使用 ui-sref-active ，例如 ng-class

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

重要的是:

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

告诉ui-router在当前状态为 .account({email:account.email})时设置 active 类，因此它现在正在查看抽象状态 .account 而不是 .account.home

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

这篇关于ui-sref-active在抽象状态下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！