javascript - 使用 Angular UI 路由器突出显示事件嵌套状态

Question

我的应用程序中的层次结构如下所示

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/... )。设置导航应仅突出显示事件设置状态。

Answer 1

如果你的架构是一致的，你可以实现一个函数来检查它的特定部分:

功能:

$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>

当然，如果您正在寻找更复杂的逻辑，您可以这样做，但关键是评估您的需求并实现最小合理的解决方案以尝试减少开销。如果您的函数太复杂，那么您的页面在每个摘要周期上运行时可能会变慢。