Tout d'abord, ce problème peut être résolu de nombreuses façons. Cette voie n'est peut-être pas la plus élégante, mais elle fonctionne toujours.
Voici une solution simple que vous devriez pouvoir ajouter à n'importe quel projet. Vous pouvez simplement ajouter une "pageKey" ou une autre propriété lorsque vous configurez votre itinéraire que vous pouvez utiliser pour vous déconnecter. En outre, vous pouvez implémenter un écouteur sur la méthode $ routeChangeSuccess de l'objet $ route pour écouter la réussite d'une modification de route.
Lorsque votre gestionnaire se déclenche, vous obtenez la clé de page et utilisez cette clé pour localiser les éléments qui doivent être «ACTIFS» pour cette page et vous appliquez la classe ACTIVE.
Gardez à l'esprit que vous avez besoin d'un moyen de rendre TOUS les éléments "EN ACTIVITÉ". Comme vous pouvez le voir, j'utilise la classe .pageKey sur mes éléments de navigation pour les désactiver tous, et j'utilise le .pageKey_ {PAGEKEY} pour les activer individuellement. Les passer tous à inactifs serait considéré comme une approche naïve, vous obtiendriez potentiellement de meilleures performances en utilisant la route précédente pour ne rendre inactifs que les éléments actifs, ou vous pourriez modifier le sélecteur jquery pour sélectionner uniquement les éléments actifs à rendre inactifs. L'utilisation de jquery pour sélectionner tous les éléments actifs est probablement la meilleure solution car elle garantit que tout est nettoyé pour l'itinéraire actuel en cas de bogues CSS qui pourraient avoir été présents sur l'itinéraire précédent.
Ce qui signifierait changer cette ligne de code:
$(".pagekey").toggleClass("active", false);
à celui-ci
$(".active").toggleClass("active", false);
Voici un exemple de code:
Étant donné une barre de navigation bootstrap 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>
Et un module angulaire et un contrôleur comme celui-ci:
<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>