Question

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

现在，当我进入时，说候选人/设置我想要突出显示候选人（在第1级）和设置（在第2级）。但是，使用ui-sref-active，如果我处于Candidate.Settings状态，则仅突出显示该状态，而不是候选者。

候选人有子状态 - ＆gt;书签，申请人设置有子状态 - ＆gt;个人资料，密码

我想一次制作有效的候选人和书签，而候选人应该在加载时重定向到书签状态。

我可以让父母和孩子的状态激活，但问题是我想在点击候选人时加载子状态，候选人和书签都应该是活动的。

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

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

或者如果您希望它可以在应用范围内使用，而无需在每个控制器中进行设置，您可以使用$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>

Answer 2

.state('advertiser.candidate', {
            url: '/candidate',
            abstract: true,
            defaultChild: 'advertiser.candidate.bookmarks',
            templateUrl: 'modules/users/views/advertiser/menuTabs/candidate/advertiser.candidate.html'
        })
        .state('advertiser.candidate.bookmarks', {
            url: '/bookmarks',
            templateUrl: 'modules/users/views/advertiser/menuTabs/candidate/advertiser.candidate.bookmarks.html'
        })

然后点击我设置$ state.go（＆＃39; advertiser.candidate.bookmarks＆＃39;）的候选页面，然后它对我有效。

Answer 3

第1步：为导航栏添加控制器或在现有控制器中添加控制器，其中包含导航栏添加以下内容

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

Step2 ：在导航栏中

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

那就是它。

Angular-ui-router：具有子活动的ui-sref-active

3 个答案: