angularjs - Angular-ui-router: ui-sref-active with child active

Question

我在我的应用程序中使用了 angular-ui-router 和嵌套状态，而且我还有一个导航栏。导航栏是手写的，并使用 ui-sref-active 突出显示当前状态。它是一个两级导航栏。

现在，当我进入时，说候选者/设置，我希望同时突出显示候选者(级别 1)和设置(级别 2)。但是，使用 ui-sref-active，如果我处于 Candidate.Settings 状态，则仅突出显示该状态，而不是 Candidate。

候选人有子状态->书签，申请人
设置有子状态 -> 配置文件，密码

我想一次创建事件候选人和书签，而候选人应该在加载时重定向到书签状态。

我能够使父状态和子状态处于事件状态，但问题是我想在单击候选时加载子状态，并且候选和书签都应该处于事件状态。

<ul class="ul-list">
      <li ui-sref-active="current"><a ui-sref="advertiser.candidate" data-ng-click="showPage('candidatePage')">Candidates</a></li>
      <li ui-sref-active="current"><a ui-sref="advertiser.settings" data-ng-click="showPage('settingsPage')">Settings</a></li>
      <li class="hide block bg-green"><a class="nav-link">Help</a></li>
      <li class="hide block bg-green"><a class="nav-link">Contact Us</a></li>
</ul>

<ul>
  <li><a ui-sref-active="current" ui-sref=".bookmarks" data-ng-click="loadCandiatePage('bookmarks')">Bookmarks <span class="sr-only"></span></a></li>
  <li><a ui-sref-active="current"  ui-sref=".applicants" data-ng-click="loadCandiatePage('applicants')"> Applicants</a></li>
  <li><a ui-sref-active="current"  ui-sref=".hired" data-ng-click="loadCandiatePage('hired')">Hired</a></li>
</ul>

提前致谢!!!

Answer 1

您可以使用 ng-class通过评估 $state 来设置所需的类名.

使用 $state如果您的 View 需要在 Controller 的范围内提供它:

controller('mainCtrl', ['$scope', '$state', function($scope, $state) {
   $scope.$state = $state;
}]);

或者，如果您希望它在应用程序范围内可用而不在每个 Controller 中设置它，您可以在 $rootScope 上定义它与 .run :

.run(function($rootScope, $state) {
   $rootScope.$state = $state;
})

在您看来，您仍然可以使用 ui-sref-active并使用 ng-class来评估当前状态。例如(替换您的应用程序逻辑):

<li>
    <a ui-sref-active="current" 
      ng-class="{'current': $state.current.name == 'advertiser.candidate'}" 
      ui-sref=".bookmarks" 
      data-ng-click="loadCandiatePage('bookmarks')">
        Bookmarks <span class="sr-only"></span>
    </a>
</li>