Router ui angular: ui-sref-active y estados nesteds

Estoy usando angular-ui-router y estados nesteds 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?

En lugar de esto-

 
  • Posts
  • Puedes hacerlo-

     
  • Posts

  • 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; }]); 

    Más información

    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

    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.

      Items  

    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 .

    Esta es la solución:

     
  • Details
  • 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:

     Link 

    Digamos que el árbol url es el siguiente:

    app (for home page) -> app.products -> app.products.category

    el uso:

     
  • Products
  • 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('/'); }); 

    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

     
  • Browse Journal
  • Eso es.

    Enrutador UI Fragmento de código para activar la barra de navegación.

    HTML

     
  • Courses
  • blog
  • CSS

     is-active{ background-color: rgb(28,153,218); } 

    Dentro del cursoView.HTML

      

    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

    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

     
  • Product groups
  • Ahora el botón de navegación productoGrupos permanece activo al acceder a cualquiera de las vistas