你的位置:首页 > Java教程

[Java教程]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);}());