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.
fuente
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.
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
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:
fuente
El uso de la directiva ui-sref-active que funcionó para mí fue:
como se encuentra aquí bajo el comentario etiquetado "tgrant59 comentó el 31 de mayo de 2016".
Estoy usando angular-ui-router v0.3.1.
fuente
Echa un vistazo a angular-ui, específicamente, comprobación de rutas: http://angular-ui.github.io/ui-utils/
fuente