एंकर का उपयोग करके वेब पेजों के माध्यम से नेविगेट करना एक आम बात रही है, खासकर कई सेक्शन वाले लंबे पेजों के लिए। हालाँकि, AngularJS अनुप्रयोगों में, एंकर लिंक हैंडलिंग समस्याग्रस्त हो सकती है।
AngularJS में एंकर लिंक पर क्लिक करते समय, डिफ़ॉल्ट व्यवहार क्लिक को रोकना और उपयोगकर्ता को एक अलग पेज पर रीडायरेक्ट करना है। इस समस्या के समाधान के लिए, AngularJS एक समाधान प्रदान करता है।
AngularJS में $anchorScroll() सेवा विशेष रूप से एंकर हैश लिंकिंग को संभालने के लिए डिज़ाइन की गई है। यह सेवा आपको यूआरएल में हैश मान के आधार पर वर्तमान पृष्ठ पर एक तत्व तक स्क्रॉल करने की अनुमति देती है।
$anchorScroll() का उपयोग करने के लिए, बस इसे अपने नियंत्रक में इंजेक्ट करें और आवश्यक होने पर इसे कॉल करें। सेवा एक वैकल्पिक आईडी पैरामीटर लेती है जो स्क्रॉल करने के लिए तत्व निर्दिष्ट करती है। यदि कोई आईडी प्रदान नहीं की गई है, तो यह $location.hash() से मेल खाने वाली आईडी वाले तत्व पर स्क्रॉल करेगा।
app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
});
Test/Foo
और भी सरल दृष्टिकोण के लिए, आप इस संशोधित कोड का उपयोग कर सकते हैं:
app.run(function($rootScope, $location, $anchorScroll) {
//when the route is changed scroll to the proper element.
$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
if($location.hash()) $anchorScroll();
});
});
आपका एंकर लिंक इस तरह दिखेगा:
Test/Foo
इन तकनीकों का लाभ उठाकर, आप अपने AngularJS अनुप्रयोगों में एंकर हैश लिंकिंग को आसानी से संभाल सकते हैं, जो कई अनुभागों के साथ लंबे पृष्ठों को नेविगेट करने के लिए एक सहज उपयोगकर्ता अनुभव प्रदान करता है।
अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।
Copyright© 2022 湘ICP备2022001581号-3