Arahan dalam AngularJS untuk membuat menu_AngularJS-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Arahan dalam AngularJS untuk membuat menu_AngularJS

May 16, 2016 pm 03:17 PM

Beritahu saya cara saya biasanya menulis menu:

&lt;ul&gt;
&lt;li data-ng-class="{'active': highlight('/orders')}"&gt;
&lt;a href="#/orders"&gt;Orders&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

Salin selepas log masuk

Sama ada item menu diserlahkan bergantung pada kaedah serlahan dalam pengawal.

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

Salin selepas log masuk

Ia akan menjadi lebih ringkas jika digunakan dalam cara Arahan.

&lt;ul menu-highlighter highlight-class-name="active"&gt;
&lt;li&gt;&lt;a href="#/customers"&gt;Customers&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#/orders"&gt;Customers&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#/about"&gt;Customers&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

Salin selepas log masuk

Arahan lebih kurang:

(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){
//&lt;a href="#/customers"&gt;Customers&lt;/a&gt;
var anchor = li.querySelector('a');
//#/customers
var href=(anchor && anchor.href) &#63; 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);
}());

Salin selepas log masuk

Kandungan di atas adalah berkaitan dengan pengetahuan membuat menu menggunakan Directive dalam AngualrJS Saya harap ia akan membantu semua orang.

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn