সক্রিয় লিঙ্কগুলি হাইলাইট করার জন্য এখানে আরও একটি নির্দেশিকা রয়েছে।
মুখ্য সুবিধা:
- গতিশীল কৌণিক এক্সপ্রেশন ধারণ করে 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);
}
);
}
};
}
]);
ব্যবহার:
কৌণিক অভিব্যক্তি সহ সাধারণ উদাহরণ, বলুন $ সুযোগ.var = 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>
সমস্ত সক্রিয়-লিঙ্ক- * বৈশিষ্ট্যগুলি যে কোনও সংমিশ্রণে ব্যবহার করা যেতে পারে, তাই খুব জটিল শর্তগুলি কার্যকর করা যেতে পারে।