Активный пункт меню в Angular?

Question

[rakro]

Как правильно присваивать класс активному пункту меню в Angular?

Answer 1

[Alexander Tartmin]

Вот код для стандартного ngRoute

<ul>
    <li ng-repeat="link in menu" ng-class="{ active: isActive(\'{{ link.href }}\') }">
        <a ng-href="{{ link.href }}" href="">{{ link.title }}</a>
    </li>
</ul>

В контроллер нужно заинжектить следующие сервисы: $scope, $location

$scope.menu = [{
    "title": "title1",
    "href": "href1"
}, {
    "title": "title2",
    "href": "href2"
}, {
    "title": "title3",
    "href": "href3"
}];

$scope.isActive(location) {
    return location === $location.path()
}

Логика такая, при nrRepeat вы каждый раз стучитесь в функцию isActive передавая ей в качестве аргумента ссылку, которая используется в меню. Функция сверяет текущий url с тем что вы ей передали и возвращает true или false. Далее ngClass подставляет класс active там, где функция isActive вернула true.

Comments

[Степан Кормилин]

Спасибо! Ваш пример замечательно работает) Есть некоторые нюансы с тем, какие href указывать в массиве и как задавать ng-href тем, кто использует маршрутизацию через "#". Но там разобраться можно, если вывести console.log($location.path()); и console.log(location);
Единственный вопрос, а если есть субменю? Как в этом случае сделать, чтобы основной пункт оставался активным?

[Alexander Tartmin]

Степан Кормилин: тут вам нужно уже проверять не только юрл, но и его часть (если я правильно понял) через регулярное выражение. Будет работать при условии что у Вас для суб-меню используются роуты вида #/main-link/sub-link
Тогда вам будет легко проверить наличие строки"/main-menu/" в юрл через регулярку.

[Alexander Tartmin]

Сорри "main-link" нужно проверять,очепятался

[Степан Кормилин]

Alexander Tartmin: Да, это понятно, если бы они были таковыми, то проблем вообще нет)) Подумаю кстати над этим, может и можно будет роуты поменять на бэкенде. Спасибо! Если с заменой роутов не получится, то потом если что напишу, как в итоге вышел из ситуации)

[lucar]

Спасибо! Ваше решение очень выручило!

Answer 2

[_ _]

Если ui-router и у пункта меню (или внутри него) есть ui-sref, то ui-sref-active="нужный_класс"

Comments

[rakro]

а если angular-route?

[_ _]

rakro: напишите директиву, которая будет элементу нужный класс добавлять. Да они даже есть готовые, скорей всего