AngularJS: acitve menu item dropdown via directive

A module to add the active class on the elements in a menu

by abhishek bhatia

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<h4>
Original code is found here - <a href="http://jsfiddle.net/gy2an/8/">Thanks to this fiddle from pylinux</a>
<p>
Also, look at SO question - <a href="http://stackoverflow.com/questions/16199418/how-do-i-implement-the-bootstrap-navbar-active-class-with-angular-js/22854824#22854824?newreg=e24d6d9b18894bd7a257a9b948e368e1 ">Stack Overflow Question</a>
See response from Pylinux user.
</p>

<p>

This has been a straight fork of the code provided by Pylinux and has been modified to add dropdown.</p>
</h4>
<div ng-app="myApp">
    <div auto-active>
        <ul>
            <li><a href="#/?some=data">This link points to #/fun1</a>
            </li>
            <li><a href="#/fun2?some=data">This link points to #/fun2</a>
            </li>
            <li><a href="#/fun3">This link points to #/fun3</a>
            </li>
            <li><a href="#/fun4">This link points to #/fun4</a>
            </li>
            <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>
        </ul>
    </div>
</div>

CSS

li.active {
    background-color:red;
}
a.active {
  background-color:red;
}

JavaScript

//this app:
angular.module('myApp', ['autoActive']);

window.location.hash = '#/'; //All hash paths need to start with a /, it happens automaticaly with ngResource and the like...

//the module we are demonstrating:
(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');
                                 if(angular.element(li).parent().parent().children('a').hasClass("dd"))
                                 {angular.element(li).parent().parent().children('a.dd').addClass('active');}
                            	} else {
                            	    angular.element(li).removeClass('active');
                                  angular.element(li).children('a').removeClass('active');
                            	}
                        });
                    }
                }

                setActive();

                scope.$on('$locationChangeSuccess', setActive);
            }
        }
    }]);
}());