AngualrJS中制作一个有关菜单的Directive

通常我们这样写一个菜单：

<ul>

    <li data-ng-class="{'active': highlight('/orders')}">

        <a href="#/orders">Orders</a>

    </li>

</ul>

菜单项是否高亮显示取决于controller中的highlight方法。

vm.highlight = funciton(path){

    return $locaiton.path().substr(0, path.lenght) === path;

}

如果以Directive的方式会更简洁。

<ul menu-highlighter highlight-class-name="active">

    <li><a href="#/customers">Customers</a></li>

    <li><a href="#/orders">Customers</a></li>

    <li><a href="#/about">Customers</a></li>

</ul>

Directive大致是：

(function(){

    var injectParams = ['$location'];

    var menuHighlighter = function($location){

        var link = function(scope, element){

            function setActive(){

                var path = $location.path();

                var className = scope.highlightClassName || 'active';

                if(path){

                    angular.forEac(element.find('li'), function(li){

                        //<a href="#/customers">Customers</a>

                        var anchor = li.querySelector('a');

                        //#/customers

                        var href=(anchor && anchor.href) ? anchor.href : anchor.getAttribute('data-href').replace('#','');

                        //customers

                        var trimmedHref = href.substr(href.indexOf('#/')+1, href.length);

                        var basePath = path.substr(0, trimmedHref.length);

                        if(trimmedHref === basePath){

                            angular.element(li).addClass(className);

                        } else {

                            angular.element(li).removeClass(className);

                        }

                    });

                }

            }

            setActive();

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

        };

        return {

            restrict: 'A',

            scope: {

                highlightClassName: '@'

            },

            link: link

        }

    };

    menuHighlighter.$inject = injectParams;

    angular.module('my.directives')

        .directive('menuHighlighter', menuHighlighter);

}());