AngualrJS中的Directive制作一个菜单
说下我经常写菜单的方式：
<ul>
<lidata-ng-class="{'active':highlight('/orders')}">
<ahref="#/orders">Orders</a>
</li>
</ul>
菜单项是否高亮显示取决于controller中的highlight方法。
vm.highlight=funciton(path){
return$locaiton.path().substr(0,path.lenght)===path;
}
如果以Directive的方式会更简洁。
<ulmenu-highlighterhighlight-class-name="active"> <li><ahref="#/customers">Customers</a></li> <li><ahref="#/orders">Customers</a></li> <li><ahref="#/about">Customers</a></li> </ul>
Directive大致是：
(function(){
varinjectParams=['$location'];
varmenuHighlighter=function($location){
varlink=function(scope,element){
functionsetActive(){
varpath=$location.path();
varclassName=scope.highlightClassName||'active';
if(path){
angular.forEac(element.find('li'),function(li){
//<ahref="#/customers">Customers</a>
varanchor=li.querySelector('a');
//#/customers
varhref=(anchor&&anchor.href)?anchor.href:anchor.getAttribute('data-href').replace('#','');
//customers
vartrimmedHref=href.substr(href.indexOf('#/')+1,href.length);
varbasePath=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);
}());
以上内容是针对AngualrJS中的Directive制作一个菜单的相关知识，希望对大家有所帮助。