AngularJS directive to mark navigation menu items as active

angular-directive-navmenu.js

'use strict';

// <ul nav-menu="active">
// 	<li><a href="/one">Page One</a></li>
// 	<li><a href="/two">Page Two</a></li>
// 	<li><a href="/three">Page Three</a></li>
// </ul>

app.directive('navMenu', function($location) {
	return function(scope, element, attrs) {
		var links = element.find('a'),
			currentLink,
			urlMap = {},
			activeClass = attrs.navMenu || 'active';

		for (var i = links.length - 1; i >= 0; i--) {
			var link = angular.element(links[i]);
			var url = link.attr('href');

			if (url.substring(0,1) === '#') {
				urlMap[url.substring(1)] = link;
			} else {
				urlMap[url] = link;
			}
		}

		scope.$on('$routeChangeStart', function() {
			var path = urlMap[$location.path()];

			links.parent('li').removeClass(activeClass);
			
			if (path) {
				path.parent('li').addClass(activeClass);
			}
		});
	};
});

thanks very much, works great with my Phonegap app

Hi Edy,

I tried using this API under one of the applications we build for highlighting (adding an 'active' class) to the <li> but it didn't show-up anything. Apart of adding this directive to the controller and mentioning the nav-menu="active" for <ul> do we need to do any changes into the UI? What is the $routeChangeStart and when it will be called.?

Can you please help me?

Thanks and Regards,
Harish.Varada

-- ul.menu-level-1
    -- li.menu-item
        -- h3.menu-title
    -- li.menu-item
        -- h3.menu-header
        -- ul.menu-level-2
            -- li.menu-item
                -- h3.menu-title
            -- li.menu-item
                -- h3.menu-header
                -- ul.menu-level-3
                    -- ...