En primer lugar, este problema se puede resolver de muchas maneras. Es posible que este camino no sea el más elegante, pero ciertamente funciona.
Aquí hay una solución simple que debería poder agregar a cualquier proyecto. Simplemente puede agregar una "pageKey" o alguna otra propiedad cuando configure su ruta que puede usar para desconectar. Además, puede implementar un escucha en el método $ routeChangeSuccess del objeto $ route para escuchar la finalización exitosa de un cambio de ruta.
Cuando se activa su controlador, obtiene la clave de página, y la usa para localizar elementos que deben ser "ACTIVOS" para esta página, y aplica la clase ACTIVE.
Tenga en cuenta que necesita una forma de hacer TODOS los elementos "EN ACTIVO". Como puede ver, estoy usando la clase .pageKey en mis elementos de navegación para desactivarlos, y estoy usando .pageKey_ {PAGEKEY} para activarlos individualmente. Cambiarlos a inactivos se consideraría un enfoque ingenuo, potencialmente obtendría un mejor rendimiento al usar la ruta anterior para hacer que solo los elementos activos estén inactivos, o podría alterar el selector jquery para seleccionar solo los elementos activos que se volverán inactivos. El uso de jquery para seleccionar todos los elementos activos es probablemente la mejor solución, ya que garantiza que todo se limpie para la ruta actual en caso de cualquier error css que pueda haber estado presente en la ruta anterior.
Lo que significaría cambiar esta línea de código:
$(".pagekey").toggleClass("active", false);
a este
$(".active").toggleClass("active", false);
Aquí hay un código de muestra:
Dada una barra de navegación de arranque de
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li><a href="#!/" class="pagekey pagekey_HOME">Home</a></li>
<li><a href="#!/page1/create" class="pagekey pagekey_CREATE">Page 1 Create</a></li>
<li><a href="#!/page1/edit/1" class="pagekey pagekey_EDIT">Page 1 Edit</a></li>
<li><a href="#!/page1/published/1" class="pagekey pagekey_PUBLISH">Page 1 Published</a></li>
</ul>
</div>
</div>
Y un módulo angular y controlador como el siguiente:
<script type="text/javascript">
function Ctrl($scope, $http, $routeParams, $location, $route) {
}
angular.module('BookingFormBuilder', []).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
template: 'I\'m on the home page',
controller: Ctrl,
pageKey: 'HOME' }).
when('/page1/create', {
template: 'I\'m on page 1 create',
controller: Ctrl,
pageKey: 'CREATE' }).
when('/page1/edit/:id', {
template: 'I\'m on page 1 edit {id}',
controller: Ctrl, pageKey: 'EDIT' }).
when('/page1/published/:id', {
template: 'I\'m on page 1 publish {id}',
controller: Ctrl, pageKey: 'PUBLISH' }).
otherwise({ redirectTo: '/' });
$locationProvider.hashPrefix("!");
}).run(function ($rootScope, $http, $route) {
$rootScope.$on("$routeChangeSuccess",
function (angularEvent,
currentRoute,
previousRoute) {
var pageKey = currentRoute.pageKey;
$(".pagekey").toggleClass("active", false);
$(".pagekey_" + pageKey).toggleClass("active", true);
});
});
</script>