突出显示子页面上的父菜单项（使用ngRoute）

Question

我正在使用AngularJs构建一个使用底部导航栏的移动应用程序。

导航结构看起来基本如下：

• 队
  • teamDetail
    • gameDetail
• 基
  • teamDetail
    • gameDetail

因此teamDetail / gameDetail可以拥有父页面“团队”或“团体”。如果用户在页面组上，则突出显示组项目。如果用户点击teamDetail然后点击gameDetail，那么仍然应该突出显示组项目。

如果用户在“团队”页面上并点击teamDetail然后点击gameDetail，则应突出显示团队项目。

所以基本上我有一个可以在不同父页面中的详细页面，我想突出显示用户导航的特定父页面。

的index.html

<a ng-class="{active: highlightTab('teams')}">Teams</a>
<a ng-class="{active: highlightTab('groups')}">Groups</a>

controller.js

function highlightTab(tab) {
    return $route.current.activeTab == tab;
}

app.js

.when('/teams',
    {
      templateUrl: 'app/partials/teams.html',
      title: 'All teams',
      activeTab: 'teams',
    })
.when('/groups',
    {
      templateUrl: 'app/partials/groups.html',
      title: 'Groups',
      activeTab: 'groups',
    })
.when('/teamDetail',
    {
      templateUrl: 'app/partials/teamDetail.html',
      title: 'Team detail',
      activeTab: '???', // this is depending on user navigation 
    })
.when('/gameDetail',
    {
      templateUrl: 'app/partials/gameDetail.html',
      title: 'Game detail',
      activeTab: '???', // this is depending on user navigation
    })

注意：我真的很想在不使用角度ui-router的情况下实现这一目标。