Angularjs 角度ui路由器：ui sref处于活动状态，子级处于活动状态

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

现在，当我在，说候选人/设置，我希望候选人（在级别1）和设置（在级别2）都突出显示。但是，如果我处于候选状态，则使用ui sref active。设置仅突出显示该状态，而不是候选状态

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

我想使活动候选人和书签的时间，而候选人应该重定向到书签状态加载时

我可以使父状态和子状态处于活动状态，但问题是我想在单击候选项时加载子状态，候选项和书签都应该处于活动状态

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

候选人
设置
帮助
联系我们


书签
申请者
雇佣

---

提前感谢

您可以使用

ng class

通过计算

$state

来设置所需的类名

要使用

$state

，如果您的视图需要使其在控制器的作用域上可用，请执行以下操作：

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

或者，如果您希望它在应用程序范围内可用，而无需在每个控制器中设置它，则可以使用

在
$rootScope
上定义它。运行
：

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

在您的视图中，您仍然可以使用
ui sref active
，也可以使用
ng class
评估当前状态。例如（替换应用程序逻辑）：


书签


然后单击候选页面我设置了$state.go（'advertiser.candidate.bookmarks'），然后它对我起了作用。
步骤1：为导航栏或包含导航栏的现有控制器添加控制器添加以下内容

app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
    $scope.isActive = function(destination) {
        return destination === $location.path();
    }
}]);

步骤2：在导航栏中

<li ng-class="{active: isActive('/home')}">
    <a ui-sref="app.home">Browse Journal</a>
</li>


期刊浏览


就这样。
你能发布你的路由配置以便我们能看到你的状态设置吗？.state（'advertiser.candidate'，{url:'/candidate'，templateUrl:'modules/users/views/advertiiser/menutab/candidate/advertiiser.candidate.html'）。state（'advertiiser.candidate.bookmarks'，{url:'/bookmarks'，templateUrl:'modules/users/views/advertiser/menutab/candidate/advertiiser.candidate.bookmarks.html'}）.state（'advertiiser.candidate.appenders'，{url:'/appenders'，templateUrl:'modules/users/views/advertiiser/menutab/candidater/advertiiser.candidater.appenders.html'}）对于上面的控制器，我有一个html解决方案，可以在选择parrent元素的子元素时使其保持活动状态。例如：
浏览日志
app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
    $scope.isActive = function(destination) {
        return destination === $location.path();
    }
}]);

<li ng-class="{active: isActive('/home')}">
    <a ui-sref="app.home">Browse Journal</a>
</li>