angularjs - sref - Angular UI Router: ¿Cómo consigo que la vista principal esté "activa" cuando navego a la vista anidada?
ui-router params (9)
Ahora se han actualizado y la nueva forma de hacerlo es
<a ui-sref-active="{''active'': ''main.app.manage.**''}" ui-sref="main.app.manage.people.list"></a>
A continuación se muestra el archivo de estado
angular.module(''manage.people'', [''people.invite''])
.config([''$stateProvider'', function($stateProvider) {
$stateProvider
.state(''main.app.manage.people'', {
url: ''/people'',
abstract: true,
cache: false,
views: {
''tabContent'': {
template: ''<div ui-view="peopleContent"></div>'',
controller: ''peopleController''
}
}
})
.state(''main.app.manage.people.list'', {
url: ''/list'',
views: {
''peopleContent'': {
templateUrl: ''/internal/main/app/manage/people/views/people.html'',
controller: ''peopleListController''
}
}
});
Estoy trabajando en un proyecto que ha implementado el enrutador UI y está utilizando ui-sref-active="active" para agregar la clase activa al elemento del menú de navegación cuando ese elemento es la ruta actual. Sin embargo, cuando navega a una vista anidada dentro de esa vista, el elemento del menú principal ya no está activo. Vea el siguiente Plunker:
http://plnkr.co/edit/2CoEdS?p=preview
Por defecto (o si hace clic en él) la ruta 1 está "activa". Cuando haga clic en "Mostrar lista", verá que la Ruta 1 ya no está activa.
Editar:
La única diferencia entre este ejemplo y mi proyecto real es que el menú de navegación en mi proyecto real tiene su propio controlador y, por lo tanto, no usa el mismo ámbito que el controlador para "route1".
El enrutador de UI angular ahora admite esto de forma nativa. Consulte commit github.com/angular-ui/ui-router/commit/…
Espero que esto sea lo que ha estado buscando. Coloque la URL de los padres en la clase de la lista, ahora cada vez que navegue a la clase de los niños, la clase de los padres estará activa.
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.
He venido aquí 2 años después, se hizo la pregunta, pero angular-ui-router tiene un enfoque muy competente para resolver este problema. También funcionó para los estados anidados.
<ul>
<li ui-sref-active="active" class="item">
<a ui-sref="home">Home</a>
</li>
<!-- ... -->
</ul>
Cuando la aplicación navega al estado de home , así es como aparecerá el HTML resultante:
<ul>
<li ui-sref-active="active" class="item active">
<a ui-sref="home">Home</a>
</li>
<!-- ... -->
</ul>
Referencia rápida de ui-sref-active:
Una directiva que trabaja junto con ui-sref para agregar clases a un elemento cuando el estado de la directiva ui-sref relacionada está activo, y eliminarlas cuando está inactiva. El caso de uso principal es simplificar la apariencia especial de los menús de navegación que se basan en ui-sref, haciendo que el botón de menú del estado "activo" aparezca diferente, distinguiéndolo de los elementos de menú inactivos.
Mi solución fue establecer:
<li ng-class="{ ''active'': state.current.name.indexOf(''route1'') != -1 }">
El estado ya fue agregado previamente al alcance del controlador:
$scope.state = $state;
No necesitas hacer nada en los controladores. Aquí está mi código de ejemplo:
<ul class="nav nav-pills nav-stacked" role="tablist">
<li ui-sref-active="active"><a ui-sref="Booking.Step1" href="#/Booking/Step1">Step1</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step2" href="#/Booking/Step2" >Step2</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step3" href="#/Booking/Step3">Step3</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step4" href="#/Booking/Step4">Step4</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step5" href="#/Booking/Step5">Step5</a></li>
</ul>
En configuración de ruta:
$stateProvider.state(''Booking'', {
abstract: true,
url: ''/Booking'',
templateUrl: "TourApp/Templates/Booking/SideMenu.html",
controller: "SideMenuController"
});
$stateProvider.state(''Booking.Step1'', {
url: "/Step1",
views: {
''content'': {
templateUrl: "TourApp/Templates/Booking/Step1.html",
controller: "Step1Controller"
}
}
});
$stateProvider.state(''Booking.Step2'', {
url: "/Step2",
views: {
''content'': {
templateUrl: "TourApp/Templates/Booking/Step2.html",
controller: "Step2Controller"
}
}
});
Tiene una comprensión errónea de ui-sref-active = "active"
<li ui-sref-active="active"><a ui-sref="route1">Route 1</a></li>
Esto mostrará el resaltado css especial solo cuando se encuentre en la ruta estatal1 (consulte https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-ui-sref-active ). Este es el caso cuando hace clic en la ruta 1. Pero cuando hace clic en "Mostrar lista" ya no está en ruta1. Más bien estás en el estado "route1.list". Puedes verificar esto escribiendo el siguiente código. Esto es estrictamente para entender cómo funciona el estado.
js
controlador interno
$rootScope.currentState = $state.$current.name //using rootScope so that you can access the variable anywhere inside html
dentro de html
{{currentState}}
Si observas detenidamente la documentación de ui-sref-active, no solo se ve en stateName sino también en stateParams, por lo tanto, cuando vas al subestado ya no cambia css. Desde el código fuente se aclara.
function update() {
if ($state.$current.self === state && matchesParams()) {
$element.addClass(activeClass);
} else {
$element.removeClass(activeClass);
}// route1===route1.list will not be true.
para resolver el problema, recuerde que las variables de alcance se heredan en vistas anidadas.
Controlador interno de ruta.
$scope.route1Active = true;
en html
<li ng-class={active:route1Active}><a ui-sref="route1">Route 1</a></li>
Ya tenemos una solución sin ningún "hack" github.com/angular-ui/ui-router/commit/…
Esa es la manera de hacer:
HTML>
<li ui-sref-active="active" >
<a href="#" class="submenu" ui-sref="bands">
<i class="fa fa-location-arrow" aria-hidden="true"></i>
Bands
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu">
<li ui-sref-active="active">
<a ui-sref="bands.nirvana">
Nirvana
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="bands.iron">
Iron
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="bands.metalica">
Metalica
</a>
</li>
</ul>
Nuestra configuración de enrutador será así>
$stateProvider.state(''bands'', {
abstract: true,
url: ''/bands'',
templateUrl: "myapp/categories/template.bands.html", //<ui-view></ui-view>
controller: "SomeController as vm"
}).state(''bands.nirvana'', {
url: ''/nirvana'',
templateUrl: "myapp/categories/band.nirvana.html",
controller: "SomeController as vm"
}).state(''bands.iron'', {
url: ''/iron'',
templateUrl: "myapp/categories/band.iron.html",
controller: "SomeController as vm"
}).state(''bands.meatlica'', {
url: ''/metalica'',
templateUrl: "myapp/categories/band.metalica.html",
controller: "SomeController as vm"
})
EDITAR Para ui-router actualizado 0.2.13:
ui-sref-active="active" ahora establece la clase ''activa'' cuando el estado actual es el estado de ui-sref o cualquier hijo
ui-sref-active-eq="active" comporta como las iteraciones anteriores de ui-sref-active, y solo establece la clase para el estado exacto
Respuesta original:
Consulte los problemas abiertos de ui-router: https://github.com/angular-ui/ui-router/issues/704 and 818
Una solución general que sugieren las personas es:
ng-class="{active:$state.includes(''route1'')}"
Por supuesto, $ state se debe agregar a $ scope. Ver plunk actualizado: http://plnkr.co/edit/KHLDJP?p=preview