Question

我正在开发一个已实现UI路由器的项目，当该项目是当前路由时，它正在使用ui-sref-active="active"将活动类添加到导航菜单项。但是，当您导航到该视图中的嵌套视图时，父菜单项不再处于活动状态。请参阅以下Plunker：

http://plnkr.co/edit/2CoEdS?p=preview

默认情况下（或点击它）路线1为“有效”。当您单击“显示列表”时，您将看到路由1不再处于活动状态。

修改

这个例子和我的实际项目之间的唯一区别是我实际项目中的导航菜单有自己的控制器，所以不使用与“route1”的控制器相同的范围。

Answer 1

编辑更新的ui-router 0.2.13：

ui-sref-active="active"现在设置当前状态为ui-sref状态或任何孩子

时的“活动”类

ui-sref-active-eq="active"表现为ui-sref-active的前一次迭代，并且只为精确状态设置类

原始答案：

请参阅开放的ui-router问题： https://github.com/angular-ui/ui-router/issues/704和818

人们建议的一般解决方法是：

ng-class="{active:$state.includes('route1')}"

当然，$ state必须添加到$ scope。请参阅更新的plunk：http://plnkr.co/edit/KHLDJP?p=preview

Answer 2

您对ui-sref-active =“active”

的理解有误

<li ui-sref-active="active"><a ui-sref="route1">Route 1</a></li>

只有当你处于状态route1（参考https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-ui-sref-active）时，才会显示特殊的css突出显示。单击路径1时就是这种情况。但是当您单击“显示列表”时，您不再位于route1中。相反，你处于“route1.list”状态。您可以通过编写以下代码来验证这一点。这完全是为了解国家如何运作。

JS

控制器内部

$rootScope.currentState = $state.$current.name //using rootScope so that you can access the variable anywhere inside html

在html中

{{currentState}}

如果你仔细查看ui-sref-active的文档，它不仅会查看stateName而且还会查看stateParams，因此当你转到它时它不再改变css。从源代码开始，它变得更加清晰。

 function update() {
        if ($state.$current.self === state && matchesParams()) {
          $element.addClass(activeClass);
        } else {
          $element.removeClass(activeClass);
        }// route1===route1.list will not be true.

要解决这个问题，请记住在嵌套视图中继承范围变量。

路线控制器内部。

$scope.route1Active = true;

in html

<li ng-class={active:route1Active}><a ui-sref="route1">Route 1</a></li>

Answer 3

Angular UI路由器现在支持此功能。请参阅提交https://github.com/angular-ui/ui-router/commit/bf163ad6ce176ce28792696c8302d7cdf5c05a01

Answer 4

我的解决方案是设置：

<li ng-class="{ 'active': state.current.name.indexOf('route1') != -1 }">

该状态之前已添加到控制器的范围内：

$scope.state = $state;

Answer 5

您无需在控制器中执行任何操作。这是我的示例代码：

    <ul class="nav nav-pills nav-stacked" role="tablist">
        <li ui-sref-active="active"><a ui-sref="Booking.Step1" href="#/Booking/Step1">Step1</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step2" href="#/Booking/Step2" >Step2</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step3" href="#/Booking/Step3">Step3</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step4" href="#/Booking/Step4">Step4</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step5" href="#/Booking/Step5">Step5</a></li>
    </ul>

在路线配置中：

$stateProvider.state('Booking', {
        abstract: true,
        url: '/Booking',
        templateUrl: "TourApp/Templates/Booking/SideMenu.html",
        controller: "SideMenuController"
    });

    $stateProvider.state('Booking.Step1', {
        url: "/Step1",
        views: {
            'content': {
                templateUrl: "TourApp/Templates/Booking/Step1.html",
                controller: "Step1Controller"
            }
        }
    });

    $stateProvider.state('Booking.Step2', {
        url: "/Step2",
        views: {
            'content': {
                templateUrl: "TourApp/Templates/Booking/Step2.html",
                controller: "Step2Controller"
            }
        }
    });

Answer 6

现在他们已经更新了，新方法就是

 <a ui-sref-active="{'active': 'main.app.manage.**'}" ui-sref="main.app.manage.people.list"></a>

以下是州档案

 angular.module('manage.people', ['people.invite'])
  .config(['$stateProvider', function($stateProvider) {
    $stateProvider
      .state('main.app.manage.people', {
        url: '/people',
        abstract: true,
        cache: false,
        views: {
          'tabContent': {
            template: '<div ui-view="peopleContent"></div>',
            controller: 'peopleController'
          }
        }
      })
      .state('main.app.manage.people.list', {
        url: '/list',
        views: {
          'peopleContent': {
            templateUrl: '/internal/main/app/manage/people/views/people.html',
            controller: 'peopleListController'
          }
        }
      });

Answer 7

我们已经有了一个没有任何＆＃34; hack＆＃34;的解决方案。 HERE

这是方法：

HTML＆gt;

 <li ui-sref-active="active" >
   <a href="#" class="submenu" ui-sref="bands">
       <i class="fa fa-location-arrow" aria-hidden="true"></i>
                     Bands
           <span class="fa fa-chevron-down"></span>
   </a>

   <ul class="nav child_menu">
        <li ui-sref-active="active">
            <a  ui-sref="bands.nirvana">
                 Nirvana   
            </a>
       </li>
       <li ui-sref-active="active">
            <a  ui-sref="bands.iron">
                Iron
            </a>
       </li>
       <li ui-sref-active="active">
            <a  ui-sref="bands.metalica">
                Metalica
            </a>
       </li>           
  </ul>

我们的路由器配置将如下＆gt;

$stateProvider.state('bands', {
    abstract: true,
    url: '/bands',
    templateUrl: "myapp/categories/template.bands.html", //<ui-view></ui-view> 
    controller: "SomeController as vm"
}).state('bands.nirvana', {
    url: '/nirvana',
    templateUrl: "myapp/categories/band.nirvana.html",
    controller: "SomeController as vm"
}).state('bands.iron', {
    url: '/iron',
    templateUrl: "myapp/categories/band.iron.html",
    controller: "SomeController as vm"
}).state('bands.meatlica', {
    url: '/metalica',
    templateUrl: "myapp/categories/band.metalica.html",
    controller: "SomeController as vm"
})

Answer 8

2年后我来到这里问了这个问题，但是angular-ui-router在解决这个问题上有很多精通的方法。它也适用于嵌套状态。

<ul>
  <li ui-sref-active="active" class="item">
    <a ui-sref="home">Home</a>
  </li>
  <!-- ... -->
</ul>

当应用导航到home状态时，这就是HTML显示的结果：

<ul>
  <li ui-sref-active="active" class="item active">
    <a ui-sref="home">Home</a>
  </li>
  <!-- ... -->
</ul>

ui-sref-active快速参考：

与ui-sref一起使用的指令，用于向元素添加类   当相关的ui-sref指令的状态处于活动状态时，并删除   它们处于非活动状态时。主要用例是简化   依赖于ui-sref的导航菜单的特殊外观，具有   “活动”状态的菜单按钮显示不同，区分它   来自非活动菜单项。

Complete documentation.

Answer 9

我希望这是你一直在寻找的东西。将父网址放在列表类中，现在无论何时导航到子类，父类都将处于活动状态

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

多数民众赞成。

Angular UI路由器：导航到嵌套视图时，如何让父视图“活动”？

9 个答案: