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

     
    
      
        Orders    
     

 

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

 

vm.highlight = funciton(path){    return $locaiton.path().substr(0, path.lenght) === path;}

 

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

 

     
    
      
Customers
    
      
Customers
    
      
Customers
     

 

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){                        //Customers                        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);}());