Динамическое применение класса 'active' в AngularJS: topbar и URL

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

Чтобы установить стиль активной вкладки в AngularJS, прикрепите класс active с помощью директивы ng-class к переменной activeTab, которая располагается в $scope. Определите активную вкладку по ее числовому индексу:

<ul>
  <li ng-class="{active: activeTab === 1}" ng-click="activeTab = 1">Вкладка 1</li>
  <li ng-class="{active: activeTab === 2}" ng-click="activeTab = 2">Вкладка 2</li>
</ul>

.active { background-color: #f0f0f0; }

$scope.activeTab = 1;

Клик по вкладке автоматически активирует соответствующий стиль, что делает управление состоянием активной вкладки эффективным и простым.

Настройка сцены через $routeProvider

Свяжите вкладки с $routeProvider в AngularJS – каждому маршруту можно присвоить атрибут activetab. Значение $route.current.activetab в контроллере позволит динамически задавать классу active принадлежность:

$routeProvider
  .when('/tab1', {
    templateUrl: 'tab1.html',
    controller: 'Tab1Ctrl',
    activetab: 'tab1'
  })
  // ...

Активный класс назначается либо через функцию в контроллере, либо прямо через свойство:

<li ng-class="{active: isActive('tab1')}">Вкладка 1</li>

$scope.isActive = function(tab) {
  return ($route.current && $route.current.activetab === tab);
};

Таким образом, активное состояние вкладки всегда сопоставляется с отображаемым контентом, обеспечивая интуитивное взаимодействие с интерфейсом.

Создание директивы для управления активными вкладками

Чтобы устранить дублирование кода и усовершенствовать возможности повторного использования, можно создать директиву:

app.directive('activeTab', ['$location', function($location) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      scope.$on('$routeChangeSuccess', function() {
        var path = $location.path();
        var activePath = attrs.activeTab;
        element.toggleClass('active', (path === activePath));
      });
    }
  };
}]);

Затем примените директиву к элементам HTML:

<li active-tab="/tab1">Вкладка 1</li>

Такой подход сосредотачивает логику активных вкладок, улучшая масштабирование и упрощая поддержку кода.

Потенциальные проблемы и решения

Обратите внимание на такие вещи, как хеширование URL. Убедитесь, что директивы и контроллеры правильно трактуют путь, исключая ненужные символы, такие как #, которые могут помешать корректной работе, особенно при использовании $location в 'html5Mode'.

Старайтесь не использовать $rootScope для создания глобальных событий и не перегружать контроллеры зависимостями от $route. Предпочтение отдается использованию наследования областей видимости и инкапсуляции функций в директивах.

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

Представьте вкладки как звездное небо, где каждая звезда – это вкладка. AngularJS выделяет активную вкладку, делая ее подобной сияющей звезде среди других:

$scope.activeTabStyle = {'color': 'red', 'font-weight': 'bold'};

Среди обычных "звезд" одна сияет ярче всех, выделяясь среди остальных. Благодаря AngularJS она становится более заметной и выразительной.

Продвинутое управление вкладками с UI-Router

Если вы используете angular-ui-router, вы можете использовать другую стратегию. У UI-Router есть сервис $state для маршрутизации. Присвойте каждой вкладке уникальное имя состояния и используйте $state.current.name для определения активной:

$stateProvider
  .state('tab1', {
    url: '/tab1',
    templateUrl: 'tab1.html',
    controller: 'Tab1Ctrl'
  })
  // ...

$scope.isActive = function(stateName) {
  return $state.current.name === stateName;
};

Сочетание $state и директивы ui-sref представляет собой надежный подход к управлению состоянием активной вкладки.

Оптимизация применения активного класса

Для предотвращения возможных проблем с производительностью из-за чрезмерного использования ng-class, целесообразно оптимизировать и разрабатывать логику директив, чтобы снизить количество циклов обнаружения изменений.

Подробнее об этом расскажет наш спикер на видео

Возьмите на заметку модуль вкладок AngularJS

Если вам требуется готовое решение, обратите внимание на модуль вкладок angular-ui-bootstrap. Он упрощает управление вкладками и соответствует лучшим практикам Angular.

Повышение надежности кода за счет повторного использования и компонентности

Внедряйте переиспользуемые компоненты и директивы, чтобы обеспечить легкую поддержку кода и способствуйте модульному подходу в проектировании приложения.

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

1. AngularJS — официальная документация AngularJS.
2. AngularUI UI-Router — руководство по управлению состояниями с помощью UI-Router.
3. Stack Overflow: использование ngClass с функциями — обсуждение применения ngClass с функциями.
4. Руководство UI-Router — детальное руководство по управлению состояниями.
5. Руководство по использованию UI-Router от DigitalOcean — полезные советы по работе с UI-Router.
6. Применение ngClass по-разному — широкое использование ng-class.
7. Руководство по ngClass от W3Schools — учебное пособие W3Schools по использованию ng-class.