Как настроить загрузочный активный класс navbar с Angular JS?
Если у меня есть Navbar в начальной загрузке с элементами
Home | About | Contact
Как установить активный класс для каждого пункта меню, когда они активны? То есть как я могу установить class="active" когда угловой маршрут в
#/для дома#/aboutдля страницы о#/contactдля страницы контактов
25 ответов
Очень элегантный способ - использовать ng-controller для запуска одного контроллера за пределами ng-view:
<div class="collapse navbar-collapse" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li>
<li ng-class="{ active: isActive('/dogs')}"><a href="/dogs">Dogs</a></li>
<li ng-class="{ active: isActive('/cats')}"><a href="/cats">Cats</a></li>
</ul>
</div>
<div ng-view></div>
и включите в controllers.js:
function HeaderController($scope, $location)
{
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
}
Я только что написал директиву для этого, так что вы можете просто добавить атрибут bs-active-link к родителю <ul> элемент, и каждый раз, когда маршрут изменился, он найдет соответствующую ссылку и добавит active класс к соответствующему <li>,
Вы можете увидеть это в действии здесь: http://jsfiddle.net/8mcedv3b/
Пример HTML:
<ul class="nav navbar-nav" bs-active-link>
<li><a href="/home">Home</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
Javascript:
angular.module('appName')
.directive('bsActiveLink', ['$location', function ($location) {
return {
restrict: 'A', //use as attribute
replace: false,
link: function (scope, elem) {
//after the route has changed
scope.$on("$routeChangeSuccess", function () {
var hrefs = ['/#' + $location.path(),
'#' + $location.path(), //html5: false
$location.path()]; //html5: true
angular.forEach(elem.find('a'), function (a) {
a = angular.element(a);
if (-1 !== hrefs.indexOf(a.attr('href'))) {
a.parent().addClass('active');
} else {
a.parent().removeClass('active');
};
});
});
}
}
}]);
Вы можете взглянуть на AngularStrap, кажется, что вы ищете директиву navbar:
https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js
.directive('bsNavbar', function($location) {
'use strict';
return {
restrict: 'A',
link: function postLink(scope, element, attrs, controller) {
// Watch for the $location
scope.$watch(function() {
return $location.path();
}, function(newValue, oldValue) {
$('li[data-match-route]', element).each(function(k, li) {
var $li = angular.element(li),
// data('match-rout') does not work with dynamic attributes
pattern = $li.attr('data-match-route'),
regexp = new RegExp('^' + pattern + '$', ['i']);
if(regexp.test(newValue)) {
$li.addClass('active');
} else {
$li.removeClass('active');
}
});
});
}
};
});
Чтобы использовать эту директиву:
Загрузите AngularStrap с http://mgcrea.github.io/angular-strap/
Включите скрипт на своей странице после bootstrap.js:
<script src="lib/angular-strap.js"></script>Добавьте директивы к вашему модулю:
angular.module('myApp', ['$strap.directives'])Добавьте директиву на вашу панель навигации:
<div class="navbar" bs-navbar>Добавьте регулярные выражения для каждого элемента навигации:
<li data-match-route="/about"><a href="#/about">About</a></li>
Вот простой подход, который хорошо работает с Angular.
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/View1') }"><a href="#/View1">View 1</a></li>
<li ng-class="{ active: isActive('/View2') }"><a href="#/View2">View 2</a></li>
<li ng-class="{ active: isActive('/View3') }"><a href="#/View3">View 3</a></li>
</ul>
В вашем контроллере AngularJS:
$scope.isActive = function (viewLocation) {
var active = (viewLocation === $location.path());
return active;
};
Если вы работаете с Angular router, директива RouterLinkActive может использоваться очень элегантно:
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" routerLink="home" routerLinkActive="active">Home</a></li>
<li class="nav-item"><a class="nav-link" routerLink="gallery" routerLinkActive="active">Gallery</a></li>
<li class="nav-item"><a class="nav-link" routerLink="pricing" routerLinkActive="active">Prices</a></li>
<li class="nav-item"><a class="nav-link" routerLink="contact" routerLinkActive="active">Contact</a></li>
</ul>
Прежде всего, эта проблема может быть решена многими способами. Этот способ может быть не самым элегантным, но он, безусловно, работает.
Вот простое решение, которое вы можете добавить в любой проект. Вы можете просто добавить "pageKey" или другое свойство при настройке маршрута, который вы можете использовать для отключения ключа. Кроме того, вы можете реализовать прослушиватель в методе $ routeChangeSuccess объекта $ route для прослушивания успешного завершения изменения маршрута.
Когда ваш обработчик запускается, вы получаете ключ страницы и используете этот ключ, чтобы найти элементы, которые должны быть "ACTIVE" для этой страницы, и вы применяете класс ACTIVE.
Имейте в виду, вам нужен способ сделать ВСЕ элементы "В АКТИВНЫХ". Как вы можете видеть, я использую класс.pageKey на своих элементах навигации, чтобы отключить их все, и я использую.pageKey_{PAGEKEY}, чтобы включить их по отдельности. Переключение их всех на неактивные, будет считаться наивным подходом, потенциально вы получите лучшую производительность, если использовать предыдущий маршрут, чтобы сделать только активные элементы неактивными, или вы могли бы изменить селектор jquery, чтобы выбрать только активные элементы, которые следует сделать неактивными. Использование jquery для выбора всех активных элементов, вероятно, является лучшим решением, поскольку оно обеспечивает очистку всего для текущего маршрута в случае любых ошибок CSS, которые могли присутствовать на предыдущем маршруте.
Что будет означать изменение этой строки кода:
$(".pagekey").toggleClass("active", false);
к этому
$(".active").toggleClass("active", false);
Вот пример кода:
Учитывая загрузчик Навбар
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li><a href="#!/" class="pagekey pagekey_HOME">Home</a></li>
<li><a href="#!/page1/create" class="pagekey pagekey_CREATE">Page 1 Create</a></li>
<li><a href="#!/page1/edit/1" class="pagekey pagekey_EDIT">Page 1 Edit</a></li>
<li><a href="#!/page1/published/1" class="pagekey pagekey_PUBLISH">Page 1 Published</a></li>
</ul>
</div>
</div>
И угловой модуль и контроллер вроде следующего:
<script type="text/javascript">
function Ctrl($scope, $http, $routeParams, $location, $route) {
}
angular.module('BookingFormBuilder', []).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
template: 'I\'m on the home page',
controller: Ctrl,
pageKey: 'HOME' }).
when('/page1/create', {
template: 'I\'m on page 1 create',
controller: Ctrl,
pageKey: 'CREATE' }).
when('/page1/edit/:id', {
template: 'I\'m on page 1 edit {id}',
controller: Ctrl, pageKey: 'EDIT' }).
when('/page1/published/:id', {
template: 'I\'m on page 1 publish {id}',
controller: Ctrl, pageKey: 'PUBLISH' }).
otherwise({ redirectTo: '/' });
$locationProvider.hashPrefix("!");
}).run(function ($rootScope, $http, $route) {
$rootScope.$on("$routeChangeSuccess",
function (angularEvent,
currentRoute,
previousRoute) {
var pageKey = currentRoute.pageKey;
$(".pagekey").toggleClass("active", false);
$(".pagekey_" + pageKey).toggleClass("active", true);
});
});
</script>
Вы действительно можете использовать angular-ui-utilsui-route директива:
<a ui-route ng-href="/">Home</a>
<a ui-route ng-href="/about">About</a>
<a ui-route ng-href="/contact">Contact</a>
или же:
Контроллер Заголовка
/**
* Header controller
*/
angular.module('myApp')
.controller('HeaderCtrl', function ($scope) {
$scope.menuItems = [
{
name: 'Home',
url: '/',
title: 'Go to homepage.'
},
{
name: 'About',
url: '/about',
title: 'Learn about the project.'
},
{
name: 'Contact',
url: '/contact',
title: 'Contact us.'
}
];
});
Индексная страница
<!-- index.html: -->
<div class="header" ng-controller="HeaderCtrl">
<ul class="nav navbar-nav navbar-right">
<li ui-route="{{menuItem.url}}" ng-class="{active: $uiRoute}"
ng-repeat="menuItem in menuItems">
<a ng-href="#{{menuItem.url}}" title="{{menuItem.title}}">
{{menuItem.name}}
</a>
</li>
</ul>
</div>
Если вы используете ui-utils, вас также может заинтересовать ui-router для управления частичными / вложенными представлениями.
Я нахожу все эти ответы немного сложными для меня, извините. Итак, я создал небольшую директиву, которая должна работать для каждой панели навигации:
app.directive('activeLink', function () {
return {
link: function (scope, element, attrs) {
element.find('.nav a').on('click', function () {
angular.element(this)
.parent().siblings('.active')
.removeClass('active');
angular.element(this)
.parent()
.addClass('active');
});
}
};
});
Использование:
<ul class="nav navbar-nav navbar-right" active-link>
<li class="nav active"><a href="home">Home</a></li>
<li class="nav"><a href="foo">Foo</a></li>
<li class="nav"><a href="bar">Bar</a></li>
</ul>
Я использую директиву ng-class с $location для достижения этого.
<ul class="nav">
<li data-ng-class="{active: ($location.path() == '/') }">
<a href="#/">Carpeta Amarilla</a>
</li>
<li class="dropdown" data-ng-class="{active: ($location.path() == '/auditoria' || $location.path() == '/auditoria/todos') }">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Auditoria
<b class="caret"></b>
</a>
<ul class="dropdown-menu pull-right">
<li data-ng-class="{active: ($location.path() == '/auditoria') }">
<a href="#/auditoria">Por Legajo</a>
</li>
<li data-ng-class="{active: ($location.path() == '/auditoria/todos') }">
<a href="#/auditoria/todos">General</a>
</li>
</ul>
</li>
</ul>
Для этого требуется, чтобы панель навигации находилась внутри основного контроллера с доступом к службе $location, например:
bajasApp.controller('MenuCntl', ['$scope','$route', '$routeParams', '$location',
function MenuCntl($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
}]);
Вы можете достичь этого с помощью условного выражения, например:
<a href="#" class="{{ condition ? 'active' : '' }}">link</a>
При этом я считаю, что угловая директива является более "правильным" способом сделать это, хотя большая часть этой мини-логики может несколько испортить вашу кодовую базу.
Я использую условные выражения для стилизации GUI время от времени во время разработки, потому что это немного быстрее, чем создание директив. Я не могу сказать вам пример, в котором они действительно долго оставались в кодовой базе. В конце концов я либо превращаю это в директиву, либо нахожу лучший способ решения проблемы.
Если вы используете ui-router, следующий пример должен удовлетворить ваши потребности на основе комментария @DanPantry к принятому ответу без добавления какого-либо кода на стороне контроллера:
<div class="collapse navbar-collapse" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="app.home()" href="/">Home</a></li>
<li ui-sref-active="active"><a ui-sref="app.dogs()" href="/dogs">Dogs</a></li>
<li ui-sref-active="active"><a ui-sref="app.cats()" href="/cats">Cats</a></li>
</ul>
</div>
<div ng-view></div>
Вы можете проверить документы для получения дополнительной информации об этом.
Вот мой взгляд на это. Небольшая комбинация ответов найдена в этом посте. У меня был немного другой случай, поэтому мое решение заключается в том, чтобы разделить меню на собственный шаблон, который будет использоваться в объекте определения директивы, а затем добавить панель навигации на страницу, на которой она мне нужна. По сути, у меня была страница входа, на которую я не хотел включать свое меню, поэтому я использовал ngInclude и вставил эту директиву при входе в систему:
ДИРЕКТИВА:
module.directive('compModal', function(){
return {
restrict: 'E',
replace: true,
transclude: true,
scope: true,
templateUrl: 'templates/menu.html',
controller: function($scope, $element, $location){
$scope.isActive = function(viewLocation){
var active = false;
if(viewLocation === $location.path()){
active = true;
}
return active;
}
}
}
});
ПРЯМОЙ ШАБЛОН (templates / menu.html)
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/View1') }"><a href="#/View1">View 1</a></li>
<li ng-class="{ active: isActive('/View2') }"><a href="#/View2">View 2</a></li>
<li ng-class="{ active: isActive('/View3') }"><a href="#/View3">View 3</a></li>
</ul>
HTML, КОТОРЫЙ ВКЛЮЧАЕТ ДИРЕКТИВ
<comp-navbar/>
Надеюсь это поможет
Если вы не хотите использовать AngularStrap, тогда эта директива должна помочь! Это модификация /questions/22201762/kak-nastroit-zagruzochnyij-aktivnyij-klass-navbar-s-angular-js/22201791#22201791.
JavaScript
angular.module('myApp').directive('bsNavbar', ['$location', function ($location) {
return {
restrict: 'A',
link: function postLink(scope, element) {
scope.$watch(function () {
return $location.path();
}, function (path) {
angular.forEach(element.children(), (function (li) {
var $li = angular.element(li),
regex = new RegExp('^' + $li.attr('data-match-route') + '$', 'i'),
isActive = regex.test(path);
$li.toggleClass('active', isActive);
}));
});
}
};
}]);
HTML
<ul class="nav navbar-nav" bs-navbar>
<li data-match-route="/home"><a href="#/home">Home</a></li>
<li data-match-route="/about"><a href="#/about">About</a></li>
</ul>
Примечание. Приведенные выше классы HTML предполагают, что вы используете Bootstrap 3.x
Расширяя myl-ответ, мне нужно было это для управления такой структурой.
-индекс
-СОБЫТИЯ<-активное
--- событийно-лист
--- событий редактировать
--- карта событий <-clicked
-places
--- Место-лист
--- место, редактировать
--- место-карта
поэтому вместо сопоставления мне пришлось использовать indexOf, чтобы проверять дочерние ссылки, отформатированные в соответствии с условием. Итак, для "событий":
<li ng-class="{ active: isActive('/event')}" class="divider-vertical dropdown">
function NavController($scope, $location) {
$scope.isActive = function (viewLocation) {
var s=false;
if($location.path().indexOf(viewLocation) != -1){
s = true;
}
return s;
};}
Используйте объект в качестве переменной-переключателя.
Вы можете сделать это встроенным довольно просто:
<ul class="nav navbar-nav">
<li ng-class="{'active':switch.linkOne}" ng-click="switch = {linkOne: true}"><a href="/">Link One</a></li>
<li ng-class="{'active':switch.linkTwo}" ng-click="switch = {link-two: true}"><a href="/link-two">Link Two</a></li>
</ul>
Каждый раз, когда вы нажимаете на ссылку, объект переключателя заменяется новым объектом, в котором истинным является только правильное свойство объекта переключателя. Неопределенные свойства будут оцениваться как ложные, и поэтому элементам, которые зависят от них, не будет присвоен активный класс.
Это простое решение
<ul class="nav navbar-nav navbar-right navbar-default menu">
<li ng-class="menuIndice == 1 ? 'active':''">
<a ng-click="menuIndice = 1" href="#/item1">item1</a>
</li>
<li ng-class="menuIndice == 2 ? 'active':''">
<a ng-click="menuIndice = 2" href="#/item2">item2</a>
</li>
<li ng-class="menuIndice == 3 ? 'active':''">
<a ng-click="menuIndice = 3" href="#/item3">item3</a>
</li>
</ul>
JavaScript
/**
* Main AngularJS Web Application
*/
var app = angular.module('yourWebApp', [
'ngRoute'
]);
/**
* Setup Main Menu
*/
app.controller('MainNavCtrl', [ '$scope', '$location', function ( $scope, $location) {
$scope.menuItems = [
{
name: 'Home',
url: '/home',
title: 'Welcome to our Website'
},
{
name: 'ABOUT',
url: '/about',
title: 'Know about our work culture'
},
{
name: 'CONTACT',
url: '/contact',
title: 'Get in touch with us'
}
];
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
}]);
HTML
<div class="navbar-collapse collapse" ng-controller="MainNavCtrl">
<ul id="add-magic-line" class="nav navbar-nav navbar-right">
<li data-ng-class="{current_page_item: isActive('{{ menuItem.url }}')}" data-ng-repeat="menuItem in menuItems">
<a data-ng-href="#{{menuItem.url}}" title="{{menuItem.title}}">
{{menuItem.name}}
</a>
</li>
</ul>
</div>
В сочетании с ответом @Olivier's AngularStrap я также реализовал ответ kevinknelson по адресу: https://github.com/twbs/bootstrap/issues/9013.
По сути, панель навигации Bootstrap3 не была разработана для одностраничного (например, углового) приложения и, таким образом, меню, когда на маленьком экране не происходило свертывание при нажатии.
Благодаря Pylinux. Я использовал его технику, а также изменил ее, чтобы поддерживать "один" уровень выпадающего меню (sub ul/li), так как это то, что мне было нужно. Посмотрите это в действии в ссылке скрипта ниже.
Обновленный Fiddle основан на ответе Pylinux - http://jsfiddle.net/abhatia/en4qxw6g/
Я сделал следующие три изменения, чтобы поддержать выпадающее меню одного уровня:
1. Добавлено значение класса dd (выпадающий) для элемента "a" в li, который должен иметь список sub ul.
<li><a class="dd">This link points to #/fun5</a>
<ul>
<li><a href="#/fun6?some=data">This link points to #/fun6</a>
</li>
<li><a href="#/fun7?some=data">This link points to #/fun7</a>
</li>
<li><a href="#/fun8?some=data">This link points to #/fun8</a>
</li>
<li><a href="#/fun9?some=data">This link points to #/fun9</a>
</li>
</ul>
</li>
2. Обновлен Javascript для добавления следующей новой логики.
if(angular.element(li).parent().parent().children('a').hasClass("dd"))
{angular.element(li).parent().parent().children('a.dd').addClass('active');}
3. Обновлен CSS, чтобы добавить следующее:
a.active {background-color:red;}
Надеюсь, это будет полезно для тех, кто хочет реализовать одноуровневое выпадающее меню.
Вы также можете использовать эту директиву активной ссылки /questions/30509722/kak-vyidelit-tekuschij-punkt-menyu/30509748#30509748
Родительский li получит активный класс, когда местоположение соответствует / url:
<li>
<a href="#!/url" active-link active-link-parent>
</li>
Это помогло мне:
var domain = '{{ DOMAIN }}'; // www.example.com or dev.example.com
var domain_index = window.location.href.indexOf(domain);
var long_app_name = window.location.href.slice(domain_index+domain.length+1);
// this turns http://www.example.com/whatever/whatever to whatever/whatever
app_name = long_app_name.slice(0, long_app_name.indexOf('/'));
//now you are left off with just the first whatever which is usually your app name
Затем вы используете JQuery(работает с Angular тоже), чтобы добавить класс Active
$('nav a[href*="' + app_name+'"]').closest('li').addClass('active');
и конечно же css:
.active{background:red;}
это работает, если у вас есть HTML, как это:
<ul><li><a href="/ee">ee</a></li><li><a href="/dd">dd</a></li></ul>
это автоматически добавит класс, активный с помощью URL-адреса страницы, и раскрасит фон в красный, если вы на сайте www.somesite.com/ee thaen ee "app" и оно будет активным.
На это давно ответили, но я думал, что поделюсь своим путем:
.run(function($rootScope, $state){
$rootScope.$state = $state;
});
Шаблон:
<ul class="nav navbar-nav">
<li ng-class="{ active: $state.contains('View1') }"><a href="...">View 1</a></li>
<li ng-class="{ active: $state.contains('View2') }"><a href="...">View 2</a></li>
<li ng-class="{ active: $state.contains('View3') }"><a href="...">View 3</a></li>
</ul>
Для тех, кто использует ui-router:
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a href="...">View 1</a></li>
<li ui-sref-active="active"><a href="...">View 2</a></li>
<li ui-sref-active="active"><a href="...">View 3</a></li>
</ul>
Для точного соответствия (например, вложенные состояния?) Используйте $state.name === 'full/path/to/state' или же ui-sref-active-eq="active"
Просто вам придется добавить необходимое active-класс с требуемым цветовым кодом.
Пример: ng-class="{'active': currentNavSelected}" ng-click="setNav"
Вот еще одно решение для тех, кто может быть заинтересован. Преимущество этого в том, что у него меньше зависимостей. Черт возьми, он работает и без веб-сервера. Так что это полностью на стороне клиента.
HTML:
<nav class="navbar navbar-inverse" ng-controller="topNavBarCtrl"">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a>
</div>
<ul class="nav navbar-nav">
<li ng-click="selectTab()" ng-class="getTabClass()"><a href="#">Home</a></li>
<li ng-repeat="tab in tabs" ng-click="selectTab(tab)" ng-class="getTabClass(tab)"><a href="#">{{ tab }}</a></li>
</ul>
</div>
Объяснение:
Здесь мы генерируем ссылки динамически из модели angularjs, используя директиву ng-repeat, Волшебство случается с методами selectTab() а также getTabClass() определено в контроллере для этой панели навигации, представленной ниже.
контроллер:
angular.module("app.NavigationControllersModule", [])
// Constant named 'activeTab' holding the value 'active'. We will use this to set the class name of the <li> element that is selected.
.constant("activeTab", "active")
.controller("topNavBarCtrl", function($scope, activeTab){
// Model used for the ng-repeat directive in the template.
$scope.tabs = ["Page 1", "Page 2", "Page 3"];
var selectedTab = null;
// Sets the selectedTab.
$scope.selectTab = function(newTab){
selectedTab = newTab;
};
// Sets class of the selectedTab to 'active'.
$scope.getTabClass = function(tab){
return selectedTab == tab ? activeTab : "";
};
});
Объяснение:
selectTab() метод вызывается с помощью ng-click директивы. Поэтому, когда ссылка нажата, переменная selectedTab устанавливается на имя этой ссылки. В HTML-коде видно, что этот метод вызывается без каких-либо аргументов для вкладки "Главная", поэтому он будет выделен при загрузке страницы.
getTabClass() метод вызывается через ng-class директива в HTML. Этот метод проверяет, совпадает ли вкладка, в которой он находится, со значением selectedTab переменная. Если true, он возвращает "активный", иначе возвращает "", который применяется как имя класса ng-class директивы. Тогда все, что вы подали в класс active будет применен к выбранной вкладке.
Я предлагаю использовать директиву по ссылке. Вот скрипка.
Но это еще не идеально. Остерегайтесь hashbangs;)
Вот javascript для директивы:
angular.module('link', []).
directive('activeLink', ['$location', function(location) {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
var clazz = attrs.activeLink;
var path = attrs.href;
path = path.substring(1); //hack because path does not return including hashbang
scope.location = location;
scope.$watch('location.path()', function(newPath) {
if (path === newPath) {
element.addClass(clazz);
} else {
element.removeClass(clazz);
}
});
}
};
}]);
и вот как это будет использоваться в HTML:
<div ng-app="link">
<a href="#/one" active-link="active">One</a>
<a href="#/two" active-link="active">One</a>
<a href="#" active-link="active">home</a>
</div>
потом стиль с помощью CSS:
.active{ color:red; }
Просто чтобы добавить два цента в дебаты, я сделал чисто угловой модуль (без jquery), и он также будет работать с хеш-адресами, содержащими данные. ( иг #/this/is/path?this=is&some=data)
Вы просто добавляете модуль как зависимость и auto-active одному из предков меню. Как это:
<ul auto-active>
<li><a href="#/">main</a></li>
<li><a href="#/first">first</a></li>
<li><a href="#/second">second</a></li>
<li><a href="#/third">third</a></li>
</ul>
И модуль выглядит так:
(function () {
angular.module('autoActive', [])
.directive('autoActive', ['$location', function ($location) {
return {
restrict: 'A',
scope: false,
link: function (scope, element) {
function setActive() {
var path = $location.path();
if (path) {
angular.forEach(element.find('li'), function (li) {
var anchor = li.querySelector('a');
if (anchor.href.match('#' + path + '(?=\\?|$)')) {
angular.element(li).addClass('active');
} else {
angular.element(li).removeClass('active');
}
});
}
}
setActive();
scope.$on('$locationChangeSuccess', setActive);
}
}
}]);
}());
* (Конечно, вы можете просто использовать директивную часть)
** Также стоит отметить, что это не работает для пустых хешей ( ig example.com/# или просто example.com) это нужно иметь как минимум example.com/#/ или просто example.com#/, Но это происходит автоматически с помощью ngResource и тому подобного.
- Вот скрипка: http://jsfiddle.net/gy2an/8/
- Вот GitHub: https://github.com/Karl-Gustav/autoActive
- Вот мой оригинальный ответ: /questions/30509722/kak-vyidelit-tekuschij-punkt-menyu/30509747#30509747