快捷導(dǎo)航

AngualrJS中的Directive制作一個菜單

更新時間：2016年01月26日 17:01:30 作者：Darren Ji

本文給大家介紹AngualrJS中的Directive制作一個菜單，涉及到angularjs directive相關(guān)知識，本文介紹的非常詳細(xì)，具有參考借鑒價值，特此分享供大家學(xué)習(xí)

說下我經(jīng)常寫菜單的方式：

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

以上內(nèi)容是針對AngualrJS中的Directive制作一個菜單的相關(guān)知識，希望對大家有所幫助。

您可能感興趣的文章:

相關(guān)文章

用Angular實時獲取本地Localstorage數(shù)據(jù),實現(xiàn)一個模擬后臺數(shù)據(jù)登入的效果
這篇文章主要介紹了用ANGULAR實時獲取本地LOCALSTORAGE數(shù)據(jù),實現(xiàn)一個模擬后臺數(shù)據(jù)登入的效果的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-11-11
Angular 根據(jù) service 的狀態(tài)更新 directive
Angular JS (Angular.JS) 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。本文給大家介紹Angular 根據(jù) service 的狀態(tài)更新 directive，需要的朋友一起學(xué)習(xí)吧
2016-04-04
AngularJs學(xué)習(xí)第八篇過濾器filter創(chuàng)建
這篇文章主要介紹了AngularJs學(xué)習(xí)第八篇過濾器filter創(chuàng)建的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
利用Angular+Angular-Ui實現(xiàn)分頁（代碼加簡單）
這篇文章主要介紹了利用Angular+Angular-Ui實現(xiàn)分頁，利用Angular+Angular-Ui實現(xiàn)的分頁分頁代碼更加簡單，更加容易懂哦，相信本文的內(nèi)容對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
2017-03-03
angularjs的一些優(yōu)化小技巧
這篇文章主要介紹了angularjs的一些優(yōu)化小技巧,本文總結(jié)了5種優(yōu)化技巧,如一次綁定、盡可能少調(diào)用 ng-repeat、盡量在指令里寫原生語法、頁面內(nèi)盡量少用filters等,需要的朋友可以參考下
2014-12-12
Angular搜索場景中使用rxjs的操作符處理思路
這篇文章主要介紹了Angular搜索場景中使用rxjs的操作符處理思路,主要的思路就是通過Subject來發(fā)送過濾條件，這樣就可以使用rxjs的各種操作符，可以快捷很多。需要的朋友可以參考下
2018-05-05
AngularJS實現(xiàn)進(jìn)度條功能示例
這篇文章主要介紹了AngularJS實現(xiàn)進(jìn)度條功能,結(jié)合具體完整實例形式分析了AngularJS實現(xiàn)進(jìn)度條功能的原理、相關(guān)知識點與注意事項,需要的朋友可以參考下
2017-07-07
angular.extend方法的具體使用
本篇文章主要介紹了angular.extend方法的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
AngularJS中使用ng-repeat的index問題
這篇文章主要介紹了AngularJS中使用ng-repeat的index問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
Angular通過angular-cli來搭建web前端項目的方法
這篇文章主要介紹了Angular通過angular-cli來搭建web前端項目的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07