angularjs - template - Router ui angular: ui-sref-active y estados anidados
ui view ui router (7)
Aquí hay una opción para cuando anida múltiples estados que no están relacionados jerárquicamente y no tiene un controlador disponible para la vista. Puede usar el filtro UI-Router incluidoByState para verificar su estado actual contra cualquier cantidad de estados nombrados.
<a ui-sref="production.products" ng-class="{active: (''production.products'' |
includedByState) || (''planning.products'' | includedByState) ||
(''production.categories'' | includedByState) ||
(''planning.categories'' | includedByState)}">
Items
</a>
TL; DR: ¿Múltiples estados con nombre no relacionados tienen que aplicar una clase activa en el mismo enlace y no tiene controlador? Use includedByState .
Estoy usando angular-ui-router
y estados anidados en mi aplicación, y también tengo una barra de navegación. La barra de navegación está escrita a mano, y usa ui-sref-active
para resaltar el estado actual. Es una barra de navegación de dos niveles.
Ahora, cuando me encuentre, diga Products / Categories
Me gustaría que se destaquen tanto los Products
(en el nivel 1) como las Categories
(en el nivel 2). Sin embargo, al usar ui-sref-active
, si estoy en ui-sref-active
, solo se resalta ese estado, no Products
.
¿Hay alguna manera de resaltar los Products
en ese estado?
Digamos que el árbol url es el siguiente:
app (for home page) -> app.products -> app.products.category
el uso:
<li ui-sref-active="active">
<a ui-sref="app.products">Products</a>
</li>
Ahora, cuando presionas los products
: solo los productos estarán activos.
si presiona en la category
: ambos productos y categoría estarán activos.
si solo desea que la categoría esté activa si la presiona, debe usar: ui-sref-active-eq
en los productos, lo que significa que solo estará activo y no será hijo.
el uso apropiado en app.js:
angular.module(''confusionApp'', [''ui.router''])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route for the home page
.state(''app'', {
url:''/'',
views: { ... }
})
// route for the aboutus page
.state(''app.products'', {
url:''products'',
views: { ... }
})
// route for the contactus page
.state(''app.products.category'', {
url:''category'',
views: { ... }
})
$urlRouterProvider.otherwise(''/'');
});
En lugar de esto-
<li ui-sref-active="active">
<a ui-sref="posts.details">Posts</a>
</li>
Puedes hacerlo-
<li ng-class="{active: $state.includes(''posts'')}">
<a ui-sref="posts.details">Posts</a>
</li>
Actualmente no funciona. Se está llevando a cabo una discusión aquí ( https://github.com/angular-ui/ui-router/pull/927 ) Y se agregará pronto.
ACTUALIZAR:
Para que esto funcione, $state
debe estar disponible a la vista.
angular.module(''xyz'').controller(''AbcController'', [''$scope'', ''$state'', function($scope, $state) {
$scope.$state = $state;
}]);
ACTUALIZACIÓN [2]:
A partir de la versión 0.2.11
, funciona de la caja. Por favor, consulte el tema relacionado: https://github.com/angular-ui/ui-router/issues/818
Esta es la solución:
<li class="myNonActiveStyle" ui-sref-active="myActiveStyle">
<a ui-sref="project.details">Details</a>
</li>
Editar:
Lo anterior solo funciona para la ruta de ruta exacta y no aplicará el estilo activo a las rutas anidadas. Esta solución debería funcionar para esto:
<a data-ui-sref="root.parent" data-ng-class="{ active: $state.includes(''root.parent'') }">Link</a>
Mi código navegó desde / productGroups hasta / productPartitions, que es la única forma de acceder a la vista "productPartitions".
Así que agregué un anclaje oculto con ui-sref también establecido en "productPartitions" dentro del mismo elemento de la lista que tiene ui-sref-active
<li ui-sref-active="active">
<a ui-sref="productGroups">
<i class="fa fa-magic"></i> Product groups </a>
<a ui-sref="productPartitions" style="display:none;"></a>
</li>
Ahora el botón de navegación productoGrupos permanece activo al acceder a cualquiera de las vistas
Tan simple, paso 1: agregue un controlador para su barra de navegación o en su controlador existente donde se incluye la barra de navegación agregue lo siguiente
app.controller(''navCtrl'', [''$scope'', ''$location'', function($scope, $location) {
$scope.isActive = function(destination) {
return destination === $location.path();
}
}]);
Paso 2: en tu barra de navegación
<li ng-class="{active: isActive(''/home'')}"><a ui-sref="app.home">Browse Journal</a></li>
Eso es.
Enrutador UI Fragmento de código para activar la barra de navegación.
HTML
<li ui-sref-active="is-active" ui-nested><a ui-sref="course">Courses</a>
</li> <li ui-sref-active="is-active" ui-nested><a ui-sref="blog">blog</a></li>
CSS
is-active{
background-color: rgb(28,153,218);
}
Dentro del cursoView.HTML
<button type="button" ui-sref="blog" class="btn btn-primary">Next</button>
Este botón está presente dentro de la vista del curso que te llevará a la siguiente vista, es decir, al blog. y resalta su barra de navegación.
encuentre un ejemplo similar, una aplicación demo ui-router angular: https://github.com/vineetsagar7/Angualr-UI-Router