Przede wszystkim problem ten można rozwiązać na wiele sposobów. Ten sposób może nie być najbardziej elegancki, ale na pewno działa.
Oto proste rozwiązanie, które powinieneś być w stanie dodać do każdego projektu. Możesz po prostu dodać „pageKey” lub inną właściwość podczas konfigurowania trasy, której możesz użyć do wyłączenia. Dodatkowo można zaimplementować detektor w metodzie $ routeChangeSuccess obiektu $ route, aby nasłuchiwać pomyślnego zakończenia zmiany trasy.
Kiedy twój handler odpala, dostajesz klawisz strony i użyj go, aby zlokalizować elementy, które muszą być „AKTYWNE” dla tej strony, i zastosuj klasę ACTIVE.
Pamiętaj, że potrzebujesz sposobu, aby WSZYSTKIE elementy były „AKTYWNE”. Jak widać, używam klasy .pageKey na moich elementach nawigacyjnych, aby je wszystkie wyłączyć, i używam .pageKey_ {PAGEKEY}, aby je indywidualnie włączyć. Przełączenie ich wszystkich w nieaktywne byłoby uważane za naiwne podejście, potencjalnie można uzyskać lepszą wydajność, korzystając z poprzedniej trasy, aby unieruchomić tylko aktywne elementy, lub można zmienić selektor jquery, aby wybrać tylko aktywne elementy, które mają być nieaktywne. Użycie jquery do zaznaczenia wszystkich aktywnych elementów jest prawdopodobnie najlepszym rozwiązaniem, ponieważ zapewnia, że wszystko zostanie wyczyszczone dla bieżącej trasy w przypadku błędów css, które mogły występować na poprzedniej trasie.
Co oznaczałoby zmianę tego wiersza kodu:
$(".pagekey").toggleClass("active", false);
do tego
$(".active").toggleClass("active", false);
Oto przykładowy kod:
Biorąc pod uwagę pasek startowy
<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>
I moduł kątowy i kontroler, takie jak:
<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>