Enrutador de la UI angular: ¿Cómo obtengo que los padres van a estar "activos" al navegar por la vista anidada?

Question

Estoy trabajando en un proyecto que ha implementado el enrutador de la interfaz de usuario y está utilizando ui-sref-active="active" para agregar la clase activa al elemento del menú de navegación cuando ese elemento es la ruta actual.Sin embargo, cuando navega a una vista anidada dentro de esa vista, el elemento del menú principal ya no está activo.Vea el siguiente plunker:

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

De forma predeterminada (o si hace clic en él) La Ruta 1 está "activa".Cuando hace clic en "Mostrar lista", verá que la ruta 1 ya no está activa.

Editar:

La única diferencia entre este ejemplo y mi proyecto real es que el menú de navegación en mi proyecto real tiene su propio controlador y, por lo tanto, no usa el mismo alcance que el controlador para "ruta1".

Answer 1

Editar para el enrutador UI actualizado 0.2.13:

ui-sref-active="active" ahora establece la clase 'activa' cuando el estado actual es el estado de la UI-SREF o cualquier niño

ui-sref-active-eq="active" se comporta como las iteraciones anteriores de UI-SREF-ACTIVE, y solo establece la clase para el estado exacto

Respuesta original:

Consulte Problemas abiertos de UI-Router: https://github.com/angular-ui/ui-router/issues/704 y 818

Se sugiere una solución general de solución:

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

Por supuesto, se debe agregar $ estado a $ alcance.Ver actualizado PLUNK: http://plnkr.co/edit/khldjp?p=preview

Answer 2

Usted está teniendo una comprensión incorrecta de UI-SREF-ACTIVE="Active"

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

Esto mostrará CSS especial que resaltará solo cuando esté en Route1 State1 (referencia https://github.com/angular-ui/ui-router/wiki/quick-reference#wiki-u-sref-active ). Este es el caso cuando hace clic en Ruta 1. Pero cuando hace clic en "Mostrar lista" ya no está en Route1. Más bien, estás en estado "Route1.List". Puede verificar esto escribiendo el siguiente código. Esto es estrictamente para comprender cómo funciona el estado.

js

INTERIOR CONTROLADOR

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

Dentro de HTML

{{currentState}}

Si observa de cerca la documentación de la UI-SREF-ACTIVE, no solo analiza el nombre de estadio, sino también estadísticas, por lo tanto, cuando va a la subestación, ya no cambia CSS. Desde el código fuente se vuelve más claro.

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

Para resolver el problema, recuerde que las variables de alcance se heredan en vistas anidas.

Dentro del controlador de la ruta.

$scope.route1Active = true;

en html

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

Answer 3

Enrutador de la UI angular ahora es compatible con esto de forma nativa.Ver cometer https://github.com/angular-ui/ui-router/commitmit/ bf163ad6ce176ce28792696c8302d7cdf5c05a01

Answer 4

Mi solución fue establecer:

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

El estado ya se agregó previamente al alcance del controlador:

$scope.state = $state;

Answer 5

No necesita hacer nada en los controladores.Aquí está mi código de ejemplo:

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

en la configuración de ruta:

$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

Ahora han actualizado y la nueva forma de hacerlo es

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

a continuación es el archivo de estado

 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

Ya tenemos una solución sin ningún "hack" aquí

Esa es la forma de hacer:

html>

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

Nuestra configuración de enrutador será así>

$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

He venido aquí 2 años después, se hizo la pregunta, pero angular-ui-router tiene un enfoque muy competente para resolver este problema.Funcionó para los estados anidados también.

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

Cuando la aplicación se navega al estado home, así es como aparecerá HTML resultante:

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

UI-SREF-activa Referencia rápida:

Una directiva que trabaja junto a UI-SREF para agregar clases a un elemento Cuando el estado relacionado de la Directiva de la UI-SREF está activo, y eliminando ellos cuando está inactivo.El caso de uso principal es simplificar el Apariencia especial de los menús de navegación que confían en la UI-SREF, teniendo El botón del menú "Activo" del estado aparece diferente, distinguiéndolo desde los elementos del menú inactivo.

Documentación completa.

Answer 9

Espero que esto sea lo que ha estado buscando. Coloque la URL de los padres en la clase de lista, ahora, siempre que navegue a la clase de padres de clase infantil estará activa

Paso 1: agregue un controlador para su barra de navegación en su controlador existente donde se incluye la barra de navegación Agregue el siguiente

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

}]);

PASO2: En su barra de navegación

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

eso es eso.