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单元设置

点击Settings链接会按预期突出显示该链接。但是离开/project/settings路线并导航到子路线（例如/project/settings/modules）＆＃34;取消突出显示＆＃34;链接。

在设置状态下还有一个额外的导航，也会突出显示;

<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标记中）并删除general路由。＆＃34;外部＆＃34;导航突出显示工作 - 但内部的突出显示，因为＆＃34;一般＆＃34;一直都很突出。

总结：我希望您在设置中突出显示我的设置（/project/settings），无论子状态是什么（/project/settings/...）。设置导航应突出显示活动设置状态。

Answer 1

如果您的架构是一致的，您可以实现一个功能来检查它的特定部分：

<强>功能：

<li ng-class="{active: isNavActive ('/Project/Settings')}">
  <a href="/Project/Settings/Modules"
    Modules
  </a>
</li>

<强>用法：

{{1}}

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

使用Angular UI路由器突出显示活动嵌套状态

1 个答案: