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:
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')}"
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.
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.
Echa un vistazo a angular-ui, específicamente, comprobación de rutas: http://angular-ui.github.io/ui-utils/