Присвоение активного класса в navbar Bootstrap с AngularJS

Быстрый ответ

Чтобы класс active динамически применялся к элементам навигационного меню Bootstrap при использовании AngularJS, воспользуйтесь директивой ng-class. Подробная инструкция представлена ниже:

<li ng-class="{ active: isActive('/home') }"><a href="#/home">Главная</a></li>
<li ng-class="{ active: isActive('/about') }"><a href="#/about">О нас</a></li>
<li ng-class="{ active: isActive('/contact') }"><a href="#/contact">Контакты</a></li>

Определите в контроллере функцию isActive, которая будет сравнивать текущий путь с заданным, используя $location.path():

app.controller('NavController', ['$scope', '$location', function($scope, $location) {
    $scope.isActive = function(path) {
        return $location.path() === path; // возвращает true, если пути совпадают
    };
}]);

Не забудьте корректно настроить маршруты в AngularJS для этих путей.

Подход с применением директив AngularJS

Более продвинутый метод управления классом active заключается в создании собственной директивы AngularJS, например, bs-active-link. Данная директива автоматически обновляет класс active для родительского элемента <ul>, пройдя по всем вложенным элементам <a>:

app.directive('bsActiveLink', ['$location', function($location) {
    return {
        restrict: 'A',
        link: function(scope, elem) {
            scope.$watch(function() {
                return $location.path();
            }, function(newValue) {
                angular.forEach(elem.find('a'), function(a) {
                    var link = angular.element(a);
                    if (a.href.match('#' + newValue + '(?:/|$)')) {
                        link.addClass('active');
                    } else {
                        link.removeClass('active');
                    }
                });
            });
        }
    };
}]);

Применение AngularStrap для упрощения задачи

AngularStrap предлагает набор готовых директив, автоматически устанавливающих класс active. Используйте bsNavbar, поместив скрипт AngularStrap после bootstrap.js.

<ul class="nav navbar-nav" bs-navbar>
    <li data-match-route="/home"><a href="#/home">Главная</a></li>
    <li data-match-route="/about"><a href="#/about">О нас</a></li>
    <li data-match-route="/contact"><a href="#/contact">Контакты</a></li>
</ul>

Чистый подход в Angular (2+)

Если вы работаете с Angular версии 2 или новее, директива routerLinkActive поможет легко добавить класс active:

<li routerLink="/home" routerLinkActive="active">Главная</li>
<li routerLink="/about" routerLinkActive="active">О нас</li>
<li routerLink="/contact" routerLinkActive="active">Контакты</li>

При использовании с AngularJS могут потребоваться некоторые модификации кода.

Визуализация

Можно представить ваше приложение AngularJS как карту (🗺️), где каждый маршрут – это отдельное направление:

Выбор активного пути можно сравнить с размещением маркера (⭐) на карте:

function setActiveClass(currentPath) {
    return currentPath === $location.path() ? '⭐' : '';
}

Когда вы находитесь на /home, таблица выглядит следующим образом:

Таким образом, навигационное меню служит вашим надёжным путеводителем.

Предотвращение возможных проблем

Примите во внимание следующие аспекты при реализации вашего решения:

• Необходима консистентная конфигурация маршрутов.
• Местоположение контроллеров имеет значение, так как ng-view может влиять на состояние навигационной панели.
• Продумайте поведение при перезагрузке страницы, чтобы оно было согласовано с концепцией SPA.
• Убедитесь, что настроенный режим $location (HTML5 или hashbang) соответствует вашей реализации функции isActive.

Улучшение для обслуживания и удобства использования

Для оптимизации пользовательского опыта и управления кодом мы предлагаем следующие служебные советы:

• Использование директив и атрибутов сделает ваш код более структурированным и понятным.
• Яркие визуальные индикаторы помогут пользователю сориентироваться в приложении.
• Единообразный стиль кодирования позволит упростить поддержку и масштабирование вашего приложения.

Полезные материалы

1. AngularJS – официальная документация по ngClass.
2. Angular directives for Bootstrap – рекомендации по интеграции Bootstrap с AngularJS.
3. javascript – How to set bootstrap navbar active class with Angular JS? – Stack Overflow – конкретный пример настройки активности классов в навигационной панели.
4. Single Page Apps with AngularJS Routing and Templating | DigitalOcean – учебник по маршрутизации и шаблонизации в SPA на AngularJS.
5. Components · Bootstrap – документация Bootstrap по навигационным панелям.
6. UI-Router for AngularJS (1.x) – UI-Router – как UI-Router может выступить в качестве альтернативы ngRoute.
7. Learn JavaScript, Angular, React, RxJS, TypeScript – статья о управлении визуальным состоянием в Angular.