Я создаю боковую панель на основе этого
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, но не могу заставить любого из них работать над плунжером.