Перш за все, цю проблему можна вирішити багатьма способами. Цей спосіб може бути не найвишуканішим, але він певно працює.
Ось просте рішення, яке ви повинні мати можливість додати до будь-якого проекту. Ви можете просто додати "pageKey" чи якусь іншу властивість під час налаштування маршруту, який можна використовувати для відключення. Крім того, ви можете впровадити слухача за методом $ routeChangeSuccess об'єкта $ route, щоб прослухати успішне завершення зміни маршруту.
Коли ваш обробник спрацьовує, ви отримуєте ключ сторінки та використовуйте цей ключ, щоб знайти елементи, які повинні бути "АКТИВНІ" для цієї сторінки, і ви застосуєте клас АКТИВНІ.
Майте на увазі, що вам потрібен спосіб зробити ВСІ елементи "В АКТИВНОМУ". Як ви бачите, я використовую клас .pageKey на моїх елементах nav, щоб їх вимкнути, і я використовую .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>