Прежде всего, эта проблема может быть решена многими способами. Этот способ может быть не самым элегантным, но, безусловно, работает.
Вот простое решение, которое вы можете добавить в любой проект. Вы можете просто добавить «pageKey» или другое свойство при настройке маршрута, который вы можете использовать для отключения ключа. Кроме того, вы можете реализовать прослушиватель для метода $ routeChangeSuccess объекта $ route, чтобы прослушивать успешное завершение изменения маршрута.
Когда ваш обработчик запускается, вы получаете ключ страницы и используете этот ключ, чтобы найти элементы, которые должны быть «ACTIVE» для этой страницы, и вы применяете класс ACTIVE.
Имейте в виду, вам нужен способ сделать ВСЕ элементы "В АКТИВНЫХ". Как вы можете видеть, я использую класс .pageKey на своих элементах навигации, чтобы отключить их все, и я использую .pageKey_ {PAGEKEY}, чтобы включить их по отдельности. Переключение их всех на неактивные, будет считаться наивным подходом, потенциально вы получите более высокую производительность, если использовать предыдущий маршрут, чтобы сделать только активные элементы неактивными, или вы можете изменить селектор jquery, чтобы выбрать только активные элементы, которые будут сделаны неактивными. Использование jquery для выбора всех активных элементов, вероятно, является наилучшим решением, поскольку оно обеспечивает очистку всего для текущего маршрута в случае любых ошибок CSS, которые могли присутствовать на предыдущем маршруте.
Что будет означать изменение этой строки кода:
$(".pagekey").toggleClass("active", false);
к этому
$(".active").toggleClass("active", false);
Вот пример кода:
Учитывая загрузчик Навбар
<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>
И угловой модуль и контроллер вроде следующего:
<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>