सक्रिय लिंक को हाइलाइट करने का एक और निर्देश यहां दिया गया है।
प्रमुख विशेषताऐं:
- Href के साथ ठीक काम करता है जिसमें गतिशील कोणीय भाव होते हैं
- हैश-बैंग नेविगेशन के साथ संगत
- बूटस्ट्रैप के साथ संगत जहां सक्रिय वर्ग को पैरेंट ली पर लागू किया जाना चाहिए न कि लिंक
- यदि कोई नेस्टेड पथ सक्रिय है, तो लिंक को सक्रिय करने देता है
- सक्रिय नहीं होने पर लिंक को अक्षम कर देता है
कोड:
.directive('activeLink', ['$location',
function($location) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
var path = attrs.activeLink ? 'activeLink' : 'href';
var target = angular.isDefined(attrs.activeLinkParent) ? elem.parent() : elem;
var disabled = angular.isDefined(attrs.activeLinkDisabled) ? true : false;
var nested = angular.isDefined(attrs.activeLinkNested) ? true : false;
function inPath(needle, haystack) {
var current = (haystack == needle);
if (nested) {
current |= (haystack.indexOf(needle + '/') == 0);
}
return current;
}
function toggleClass(linkPath, locationPath) {
// remove hash prefix and trailing slashes
linkPath = linkPath ? linkPath.replace(/^#!/, '').replace(/\/+$/, '') : '';
locationPath = locationPath.replace(/\/+$/, '');
if (linkPath && inPath(linkPath, locationPath)) {
target.addClass('active');
if (disabled) {
target.removeClass('disabled');
}
} else {
target.removeClass('active');
if (disabled) {
target.addClass('disabled');
}
}
}
// watch if attribute value changes / evaluated
attrs.$observe(path, function(linkPath) {
toggleClass(linkPath, $location.path());
});
// watch if location changes
scope.$watch(
function() {
return $location.path();
},
function(newPath) {
toggleClass(attrs[path], newPath);
}
);
}
};
}
]);
उपयोग:
कोणीय अभिव्यक्ति के साथ सरल उदाहरण, $ गुंजाइश कहते हैं। 2. = 2 , तब लिंक सक्रिय होगा यदि स्थान / url / 2 है :
<a href="#!/url/{{var}}" active-link>
बूटस्ट्रैप उदाहरण, अभिभावक ली को सक्रिय वर्ग मिलेगा:
<li>
<a href="#!/url" active-link active-link-parent>
</li>
नेस्टेड url के साथ उदाहरण, लिंक सक्रिय होगा यदि कोई नेस्टेड url सक्रिय है (यानी / url / 1 , / url / 2 , url / 1/2 / ... )
<a href="#!/url" active-link active-link-nested>
जटिल उदाहरण, लिंक बिंदु एक url ( / url1 ) पर सक्रिय होगा, लेकिन यदि दूसरा चुना गया हो ( / url2 ):
<a href="#!/url1" active-link="#!/url2" active-link-nested>
अक्षम लिंक के साथ उदाहरण, यदि यह सक्रिय नहीं है तो यह होगा 'अक्षम' होगा वर्ग होगा:
<a href="#!/url" active-link active-link-disabled>
सभी सक्रिय-लिंक- * विशेषताओं का उपयोग किसी भी संयोजन में किया जा सकता है, इसलिए बहुत जटिल परिस्थितियों को लागू किया जा सकता है।