"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > AngularJS अनुप्रयोगों में एंकर हैश लिंकिंग को कैसे संभालें?

AngularJS अनुप्रयोगों में एंकर हैश लिंकिंग को कैसे संभालें?

2024-11-08 को प्रकाशित
ब्राउज़ करें:153

How to Handle Anchor Hash Linking in AngularJS Applications?

AngularJS में एंकर हैश हैंडलिंग

एंकर का उपयोग करके वेब पेजों के माध्यम से नेविगेट करना एक आम बात रही है, खासकर कई सेक्शन वाले लंबे पेजों के लिए। हालाँकि, AngularJS अनुप्रयोगों में, एंकर लिंक हैंडलिंग समस्याग्रस्त हो सकती है।

AngularJS में एंकर लिंक पर क्लिक करते समय, डिफ़ॉल्ट व्यवहार क्लिक को रोकना और उपयोगकर्ता को एक अलग पेज पर रीडायरेक्ट करना है। इस समस्या के समाधान के लिए, AngularJS एक समाधान प्रदान करता है।

$anchorScroll()

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