Присвоение активного класса в 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 как карту (🗺️), где каждый маршрут – это отдельное направление:
Маршрут | Навигационная панель |
---|---|
/home | 🏠 (active) |
/about | ℹ️ |
/contact | 📞 |
Выбор активного пути можно сравнить с размещением маркера (⭐) на карте:
function setActiveClass(currentPath) {
return currentPath === $location.path() ? '⭐' : '';
}
Когда вы находитесь на /home
, таблица выглядит следующим образом:
Маршрут | Навигационная панель |
---|---|
🏠 /home | Главная (⭐) |
ℹ️ /about | О нас |
📞 /contact | Контакты |
Таким образом, навигационное меню служит вашим надёжным путеводителем.
Предотвращение возможных проблем
Примите во внимание следующие аспекты при реализации вашего решения:
- Необходима консистентная конфигурация маршрутов.
- Местоположение контроллеров имеет значение, так как
ng-view
может влиять на состояние навигационной панели. - Продумайте поведение при перезагрузке страницы, чтобы оно было согласовано с концепцией SPA.
- Убедитесь, что настроенный режим
$location
(HTML5 или hashbang) соответствует вашей реализации функцииisActive
.
Улучшение для обслуживания и удобства использования
Для оптимизации пользовательского опыта и управления кодом мы предлагаем следующие служебные советы:
- Использование директив и атрибутов сделает ваш код более структурированным и понятным.
- Яркие визуальные индикаторы помогут пользователю сориентироваться в приложении.
- Единообразный стиль кодирования позволит упростить поддержку и масштабирование вашего приложения.
Полезные материалы
- AngularJS – официальная документация по
ngClass
. - Angular directives for Bootstrap – рекомендации по интеграции Bootstrap с AngularJS.
- javascript – How to set bootstrap navbar active class with Angular JS? – Stack Overflow – конкретный пример настройки активности классов в навигационной панели.
- Single Page Apps with AngularJS Routing and Templating | DigitalOcean – учебник по маршрутизации и шаблонизации в SPA на AngularJS.
- Components · Bootstrap – документация Bootstrap по навигационным панелям.
- UI-Router for AngularJS (1.x) – UI-Router – как UI-Router может выступить в качестве альтернативы ngRoute.
- Learn JavaScript, Angular, React, RxJS, TypeScript – статья о управлении визуальным состоянием в Angular.