Cómo detectar el estado actual dentro de la directiva


86

Estoy usando el enrutamiento de AngularUI y me gustaría hacer una, ng-class="{active: current.state}"pero no estoy seguro de cómo detectar exactamente el estado actual en una directiva como esta.

Respuestas:


115

También puede usar la directiva ui-sref-active :

<ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
  </li>
  <!-- ... -->
</ul>

O filtros: "stateName" | isState&"stateName" | includedByState


146

Actualizar:

Esta respuesta fue para una versión mucho más antigua de Ui-Router. Para las versiones más recientes (0.2.5+), utilice la directiva de ayuda ui-sref-active. Detalles aquí .


Respuesta original:

Incluya el servicio $ state en su controlador. Puede asignar este servicio a una propiedad en su alcance.

Un ejemplo:

$scope.$state = $state;

Luego, para obtener el estado actual en sus plantillas:

$state.current.name

Para comprobar si un estado está activo actualmente:

$state.includes('stateName'); 

Este método devuelve verdadero si se incluye el estado, incluso si es parte de un estado anidado. Si estuviera en un estado anidado user.details, y lo verificara $state.includes('user'), devolvería verdadero.

En el ejemplo de tu clase, harías algo como esto:

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

3
¿Qué pasa con los estados que tienen parámetros?
Bradley Trager


25

Si está utilizando ui-router, pruebe $ state.is ();

Puedes usarlo así:

$state.is('stateName');

Según la documentación:

$ state.is ... similar a $ state.includes, pero solo verifica el nombre completo del estado.


1

El uso de la directiva ui-sref-active que funcionó para mí fue:

<li ui-sref-active="{'active': 'admin'}">
    <a ui-sref="admin.users">Administration Panel</a>
</li>

como se encuentra aquí bajo el comentario etiquetado "tgrant59 comentó el 31 de mayo de 2016".

Estoy usando angular-ui-router v0.3.1.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.