Выделите текущую вкладку на боковой панели с помощью AngularJS

Я создаю боковую панель на основе этого

http://plnkr.co/edit/xzcjStdvmkI2rpfMzLjI?p=preview найдено из этого руководство

Однако я хочу, чтобы выбор оставался активным после нажатия ссылки. Я пытался добавить переключатель данных, но, похоже, это работает для навигационных таблеток вместо навигационной панели. Я также нашел директиву is-active-nav, которую пытался реализовать:

angular.module('sidebarmodule')
    .directive('isActiveNav', ['$location', function ($location) {
    return {
        restrict: 'A',
        link: function (scope, element) {
            scope.location = $location;
            scope.$watch('location.path()', function (currentPath) {
                if ('/#' + currentPath === element[0].attributes['href'].nodeValue) {
                    element.parent().addClass('active');
                } else {
                    element.parent().removeClass('active');
                }
            });

        }
    };
}]);

Который я вызываю в шаблоне боковой панели следующим образом:

<li> <a is-active-nav href="#">Link1</a> </li>

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

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

а затем добавить в шаблон:

<li ng-class="{ active: isActive('/importinvoice')}"><a href="#/firstlink">First Link</a></li>

Однако я ничего не делаю, чтобы элементы боковой панели оставались выделенными после перехода на эту страницу. Я пытаюсь держаться подальше от jQuery, так как хочу, чтобы это было только решение AngularJS.

Я пробовал большинство решений из этого ответа на stackoverflow, но не могу заставить любого из них работать над плунжером.


person jenryb    schedule 14.03.2016    source источник


Ответы (1)


Ты на правильном пути:

Функция isActive для каждого элемента списка должна передавать параметр, соответствующий его href, поэтому в вашем примере это должно быть:

<li ng-class="{ active: isActive('/firstlink')}"><a href="#/firstlink">First Link</a></li>

Вам также необходимо добавить стиль для активного класса в CSS. Я не уверен, сделали ли вы это уже, так как предоставленный вами plunkr неполный.

См. мой Plunkr здесь: http://plnkr.co/edit/zE6sXEn4wHJufOlnNeld

person james00794    schedule 15.03.2016
comment
Глупый, я забыл добавить стиль для активного класса. Большое спасибо за ваш рабочий Plunkr! - person jenryb; 15.03.2016