我的应用程序中的层次结构如下所示
Project (URL: /project)
|- Module 1 (URL: /project/module1)
|- Module 2 (URL: /project/module2)
|- Settings (URL: /project/settings)
|-- General Settings (Default view) (URL: /project/settings)
|-- Module settings (URL: /project/settings/modules)
因此,这就是我的设置路线 (cofeescript
)
.state 'project-details.settings', {
abstract: true,
url: '/settings',
templateUrl: 'settings.html'
}
.state 'project-details.settings.general', {
url: '',
templateUrl: 'templates/projects/settings/general.html'
}
.state 'project-details.settings.contributors', {
url: '/contributors',
templateUrl: 'contributors.html'
}
# more routes...
我的项目导航如下所示
模块 1 设置单击设置
链接会按预期突出显示该链接。但是离开 /project/settings
路由并导航到子路由(例如 /project/settings/modules
)“取消突出显示”链接。
设置状态本身内还有一个附加导航,该导航也突出显示;
<ul class="nav nav-pills nav-stacked">
<li ui-sref-active="active"><a ui-sref="project-details.settings.general">General</a></li>
<li ui-sref-active="active"><a ui-sref="project-details.settings.modules">Modules</a></li>
</ul>
此处突出显示效果很好。
我尝试将常规设置放在 /settings
路由中(通过将模板放在 ui-view
标记中)并摆脱 一般
路线。 “外部”导航突出显示有效 - 但内部导航却一团糟,因为“常规”始终突出显示。
总结:我希望当您处于设置中时突出显示我的设置 (/project/settings
),无论子状态 (/project/settings/...
)。设置导航应仅突出显示事件设置状态。
最佳答案
如果你的架构是一致的,你可以实现一个函数来检查它的特定部分:
功能:
$scope.isNavActive = function (path)
{
try
{
return ($location.path ().split ('/')[2] === path.split ('/')[2]);
}
catch (error)
{
return false;
}
};
用法:
<li ng-class="{active: isNavActive ('/Project/Settings')}">
<a href="/Project/Settings/Modules"
Modules
</a>
</li>
当然,如果您正在寻找更复杂的逻辑,您可以这样做,但关键是评估您的需求并实现最小合理的解决方案以尝试减少开销。如果您的函数太复杂,那么您的页面在每个摘要周期上运行时可能会变慢。
关于javascript - 使用 Angular UI 路由器突出显示事件嵌套状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40361637/