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

Question

क्या आप में से किसी को पता है कि एंगुलर हैश को एंगुलरजेएस में जोड़ने का काम कैसे किया जाता है ?

मेरे पास एक सामान्य FAQ-पृष्ठ के लिए निम्नलिखित मार्कअप है

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>

उपरोक्त में से किसी भी लिंक पर क्लिक करने पर AngularJS इंटरसेप्ट करता है और मुझे पूरी तरह से अलग पेज पर ले जाता है (मेरे मामले में, 404-पेज क्योंकि लिंक से मेल खाते मार्ग नहीं हैं।)

मेरा पहला विचार था कि " / faq /: चैप्टर " से मेल खाते मार्ग का निर्माण किया जाए और तत्संबंधी नियंत्रक जांच $routeParams.chapterमें एक मेल तत्व के बाद और फिर नीचे स्क्रॉल करने के लिए jQuery का उपयोग करें।

लेकिन फिर AngularJS फिर से मुझ पर चमकता है और बस पृष्ठ के शीर्ष पर वैसे भी स्क्रॉल करता है।

तो, यहां किसी ने भी अतीत में ऐसा ही कुछ किया है और इसका एक अच्छा समाधान जानता है?

संपादित करें: html5Mode पर स्विच करने से मेरी समस्याओं का समाधान होना चाहिए लेकिन हमें थोड़े IE8 + का समर्थन करना है, इसलिए मुझे डर है कि यह स्वीकार नहीं है: / /

Comments

मुझे लगता है कि कोणीय ng-href=""इसके बजाय उपयोग करने का सुझाव देता है ।

— सूअर का बच्चा

मुझे लगता है कि एनजी-एचआरईआर केवल तभी लागू होता है जब यूआरएल में गतिशील डेटा होता है जिसे एनजी-मॉडल के लिए बाध्य होना चाहिए। मुझे आश्चर्य है कि अगर आप किसी हैशप्रिफ़िक्स को लोकप्रॉइडर पर असाइन करते हैं, अगर यह लिंक के आईडी की अनदेखी करेगा: docs.angularjs.org/guide/dev_guide.services.ozlocation

— एडम

एनजी- href उपयोग पर एडम सही है।

— रासमस

एंगुलरज में एंकर लिंक

— माइकेल बेंजामिन सेरेन्स 14

यह नए

— एंगुलर के

Answer 1

तुम खोज रहे हो $anchorScroll()।

यहाँ (भद्दा) प्रलेखन है।

और यहाँ स्रोत है।

मूल रूप से आप बस इसे इंजेक्ट करते हैं और इसे अपने कंट्रोलर में कॉल करते हैं, और यह आपको किसी भी तत्व के साथ मिल जाएगा $location.hash()

app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});

<a ng-click="scrollTo('foo')">Foo</a>

<div id="foo">Here you are</div>

यहाँ प्रदर्शित करने के लिए एक प्लंकर है

EDIT: रूटिंग के साथ इसका उपयोग करने के लिए

हमेशा की तरह अपने कोणीय मार्ग को सेट करें, फिर बस निम्नलिखित कोड जोड़ें।

app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});

और आपका लिंक इस तरह दिखाई देगा:

<a href="#/test?scrollTo=foo">Test/Foo</a>

यहाँ रूटिंग और $ लंगर के साथ स्क्रॉल प्रदर्शित करने वाला प्लंकर है

और भी सरल:

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();  
  });
});

और आपका लिंक इस तरह दिखाई देगा:

<a href="#/test#foo">Test/Foo</a>

Comments

समस्या तब आ सकती है जब आप रूटिंग जोड़ते हैं: यदि एनजीव्यू जोड़ें तो यूआरएल के हैश के प्रत्येक परिवर्तन से रूट पुनः लोड हो जाएगा ... आपके उदाहरण में कोई रूटिंग नहीं है और url वर्तमान आइटम को प्रतिबिंबित नहीं करता है ... लेकिन $ anchorScroll

— Valentyn Shybanov

@blesh, कॉलिंग लोकेशन.शश (X) पेज को तब से बदलता है जब रूटिंग विचारों को नियंत्रित करता है।

— dsldsl

यह समाधान मेरे पूरे आवेदन को फिर से प्रस्तुत करने का कारण बनता है।

@dsldsl && @OliverJosephAsh: $ location.hash () पृष्ठ को पुनः लोड नहीं करेगा। यदि यह है, तो कुछ और चल रहा है। यहां समय के साथ एक ही प्लंक लिखा जा रहा है क्योंकि पेज लोड हो रहा है, आप देखेंगे कि यह परिवर्तित नहीं होता है यदि आप रूट को फिर से लोड किए बिना वर्तमान पृष्ठ पर एक एंकर टैग को स्क्रॉल करना चाहते हैं, तो आप बस एक करेंगे! नियमित लिंक <a href="#foo">foo</a>। मेरा कोड नमूना राउटरचेंज पर एक आईडी को स्क्रॉल करने के लिए था।

— बेन लेश

@blesh: मैं आपको वांछित सेक्शन पर स्क्रॉल करने के बाद हैश को हटाने की सलाह दूंगा, इस तरह से URL उस सामान से प्रदूषित नहीं है जो वास्तव में नहीं होना चाहिए। इसका प्रयोग करें:$location.search('scrollTo', null)

— कुमारहर्ष १४'१३ को १har

Answer 2

मेरे मामले में, मैंने देखा कि यदि मैंने संशोधित किया तो रूटिंग लॉजिक किक कर रहा था $location.hash()। निम्न चाल काम किया ।।

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id);
    $anchorScroll();
    //reset to old to keep any additional routing logic from kicking in
    $location.hash(old);
};

Comments

उसके लिए शानदार धन्यवाद, रूटिंग लॉजिक ने @ blesh .run (...) समाधान का उपयोग करते हुए भी व्यवहार करने से बिल्कुल इनकार कर दिया, और यह इस प्रकार है।

— ljs

आपकी "पुरानी हैश की बचत" चाल एक पूर्ण जीवन रक्षक रही है। यह मार्ग को साफ रखते हुए पृष्ठ पुनः लोड करने से रोकता है। गजब का विचार!

— यहलहम

अच्छा है। लेकिन आपके समाधान को लागू करने के बाद, यूआरएल लक्ष्य आईडी के मूल्य को अपडेट नहीं कर रहा है।

— मोहम्मद हुसैन

मुझे मोहम्मद के समान ही अनुभव था ... यह वास्तव में रीलोड को रोक देता है लेकिन यह हैशलेस मार्ग प्रदर्शित करता है (और $ एंकरसक्रोल का कोई प्रभाव नहीं था)। 1.2.6 हम्म।

— माइकल

मैं उपयोग करता हूं $location.hash(my_id); $anchorScroll; $location.hash(null)। यह पुनः लोड को रोकता है और मुझे oldचर का प्रबंधन करने की आवश्यकता नहीं है ।

— एमएफबी

Answer 3

target="_self"लिंक बनाते समय किसी राउटिंग या किसी अन्य चीज़ को बदलने की आवश्यकता नहीं है

उदाहरण:

<a href="#faq-1" target="_self">Question 1</a>
<a href="#faq-2" target="_self">Question 2</a>
<a href="#faq-3" target="_self">Question 3</a>

और इस तरह से idअपने HTML तत्वों में विशेषता का उपयोग करें:

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

## का उपयोग करने की कोई आवश्यकता नहीं है जैसा कि टिप्पणियों में बताया गया है ;-)

Comments

यह मेरे लिए काम नहीं किया, लेकिन यहाँ समाधान किया: stackoverflow.com/a/19367249/633107

— Splaktar

इस समाधान के लिए धन्यवाद। लेकिन लक्ष्य = "_ आत्म" पर्याप्त है। डबल # करने के लिए कोई ज़रूरत नहीं

— क्रिस्टोफ़ पी

लक्ष्य = "_ आत्म" निश्चित रूप से सबसे अच्छा उत्तर है (# डबल करने की आवश्यकता नहीं है, जैसा कि क्रिस्टोफ़ पी द्वारा बताया गया है)। यह काम करता है अगर Html5Mode चालू या बंद हो तो कोई बात नहीं।

— न्यूमैन

सरल और पूर्ण। एक और कोणीय निर्भरता को जोड़ने की आवश्यकता के बिना मेरे लिए काम किया।

— adeady

यह सही उपाय है। कोणीय $ लंगर सेवा को शामिल करने की आवश्यकता नहीं है। एक टैग के लिए दस्तावेज़ीकरण देखें: https://developer.mozilla.org/en/docs/Web/HTML/Element/a

— यूलिंग

Answer 4

<a href="##faq-1">Question 1</a>
<a href="##faq-2">Question 2</a>
<a href="##faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

Comments

बहुत बढ़िया! अब तक का सबसे सरल समाधान, लेकिन किसी भी विचार को एक अलग पेज पर एंकर से कैसे जोड़ा जाए? (अर्थात / उत्पाद # पुस्तकें)

— 8bithero

मुझे लगता है कि यह AngularJS में समाधान (/ उत्पादों ## पुस्तकें) के समान है

— lincolnge

मेरे अनुभव से, href = "##" केवल तभी काम करता है जब $ एंकरस्क्रॉल इंजेक्ट किया जाता है।

— ब्रायन पार्क

यह अपेक्षाकृत सरल लगता है लेकिन इसका काम नहीं करना :-(

— brykneval

मैंने लक्ष्य = "_ आत्म" को जोड़ा और इसने पृष्ठ के भीतर सभी प्रकार के नेविगेशन के लिए आकर्षण की तरह काम किया (पढ़ें स्लाइडर्स, विभिन्न वर्गों में जा रहा है और इसी तरह)। इस बेहतरीन और सरल ट्रिक को शेयर करने के लिए आपका धन्यवाद।

— कुमार नितेश

Answer 5

यदि आप हमेशा मार्ग जानते हैं, तो आप लंगर को इस तरह से जोड़ सकते हैं:

href="#/route#anchorID

जहां routeवर्तमान कोणीय मार्ग है और पृष्ठ पर कहीं से anchorIDमेल खाता है<a id="anchorID">

Comments

यह एक सामान्य AngularJS मार्ग परिवर्तन को ट्रिगर करता है और इसलिए इसे हतोत्साहित किया जाता है। मेरे मामले में अक्सर पूछे जाने वाले प्रश्न / सहायता पृष्ठ में YouTube वीडियो लोड होने के बाद से यह बहुत ही दृश्यमान था।

— रॉबिन एंडरसन

@ रॉबिनवेसन-एंडरसन reloadOnSearch: falseअपने मार्गों के विन्यास में उस मार्ग के लिए निर्दिष्ट करके , कोणीय एक मार्ग परिवर्तन को ट्रिगर नहीं करेगा और बस आईडी पर स्क्रॉल करेगा। aटैग में निर्दिष्ट पूर्ण मार्ग के संयोजन में , मैं कहूंगा कि यह सबसे सरल और सीधा समाधान है।

— एलीस

धन्यवाद। इससे मुझे मदद मिली। मैं अपने ऐप में किसी भी कस्टम रूट का उपयोग नहीं करता, इसलिए href = "# / # एंकर-नाम" करके बहुत अच्छा काम किया!

— जॉर्डन

Answer 6

$anchorScroll इसके लिए काम करता है, लेकिन एंगुलर के हाल के संस्करणों में इसका उपयोग करने का एक बेहतर तरीका है।

अब, $anchorScrollहैश को एक वैकल्पिक तर्क के रूप में स्वीकार करता है, इसलिए आपको बिल्कुल भी बदलने की आवश्यकता नहीं है $location.hash। ( प्रलेखन )

यह सबसे अच्छा समाधान है क्योंकि यह मार्ग को बिल्कुल प्रभावित नहीं करता है। मुझे काम करने के लिए कोई अन्य समाधान नहीं मिल सका क्योंकि मैं ngRoute का उपयोग कर रहा हूं और जैसे ही मैं अपना जादू करूँगा $location.hash(id), वैसे ही मार्ग को फिर से सेट कर दूंगा $anchorScroll।

यहाँ इसका उपयोग कैसे किया जाता है ... पहला, निर्देश या नियंत्रक में:

$scope.scrollTo = function (id) {
  $anchorScroll(id);  
}

और फिर दृश्य में:

<a href="" ng-click="scrollTo(id)">Text</a>

इसके अलावा, यदि आपको एक निश्चित नेबार (या अन्य यूआई) के लिए खाते की आवश्यकता है, तो आप इस तरह से $ लंगर के लिए ऑफसेट सेट कर सकते हैं (मुख्य मॉड्यूल के रन फ़ंक्शन में):

.run(function ($anchorScroll) {
   //this will make anchorScroll scroll to the div minus 50px
   $anchorScroll.yOffset = 50;
});

Comments

धन्यवाद। मार्ग परिवर्तन के साथ संयुक्त हैश लिंक के लिए आप अपनी रणनीति को कैसे लागू करेंगे? उदाहरण: इस नौसेना आइटम पर क्लिक करें, जो एक अलग दृश्य खोलता है और idउस दृश्य में एक विशिष्ट तक स्क्रॉल करता है।

— काइल वैसैला

पेस्टर के लिए बैठें..यदि आपको मौका मिले तो आप मेरे स्टैक प्रश्न को देख सकते हैं? मुझे लगता है कि आपका जवाब यहाँ मुझे बहुत करीब से मिल गया है, लेकिन मैं इसे लागू नहीं कर सकता: stackoverflow.com/questions/41494330 …… । मैं भी उपयोग कर रहा हूँ ngRouteऔर कोणीय का नया संस्करण।

— काइल वासेला

मुझे खेद है कि मैंने उस विशेष मामले की कोशिश नहीं की है ... लेकिन क्या आपने $ location.search () या $ मार्गप्रेम पर एक नज़र डाली है ? शायद आप अपने कंट्रोलर के इनिशियलाइज़ेशन पर एक या दूसरे का इस्तेमाल कर सकते हैं - अगर आपका स्क्रोल्टो सर्च परम URL में है, तो पेज को स्क्रॉल करने के लिए कंट्रोलर $ एंकरस्रोल का इस्तेमाल कर सकता है।

— रेबेका

सीधे $ $ लंगर में पास करके, मेरे मार्ग कुछ इस तरह से बदल गए / संपर्क # संपर्क से सिर्फ / संपर्क तक। यह स्वीकृत उत्तर imho होना चाहिए।

— रैंडमयूएस

Answer 7

यह एक निर्देश का उपयोग करके मेरा समाधान था जो अधिक कोणीय-वाई लगता है क्योंकि हम डोम के साथ काम कर रहे हैं:

यहाँ पर प्लेनक्र

GitHub

कोड

angular.module('app', [])
.directive('scrollTo', function ($location, $anchorScroll) {
  return function(scope, element, attrs) {

    element.bind('click', function(event) {
        event.stopPropagation();
        var off = scope.$on('$locationChangeStart', function(ev) {
            off();
            ev.preventDefault();
        });
        var location = attrs.scrollTo;
        $location.hash(location);
        $anchorScroll();
    });

  };
});

एचटीएमएल

<ul>
  <li><a href="" scroll-to="section1">Section 1</a></li>
  <li><a href="" scroll-to="section2">Section 2</a></li>
</ul>

<h1 id="section1">Hi, I'm section 1</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

<h1 id="section2">I'm totally section 2</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

मैंने $ लंगर सेवा का उपयोग किया। हैश चेंजिंग के साथ जाने वाले पेज-रिफ्रेश का प्रतिकार करने के लिए मैं आगे बढ़ा और उसने स्थान परिवर्तन की घटना को रद्द कर दिया। यह मेरे लिए काम कर रहा था क्योंकि मेरे पास एनजी-स्विच तक एक मदद पृष्ठ था और ताज़ा ऐप को संभावित रूप से तोड़ देगा।

Comments

मुझे आपका निर्देश समाधान पसंद है। हालाँकि आप यह कैसे करेंगे कि आप एक और पेज लोड करना चाहते हैं और एक ही समय में एंकर स्थान पर स्क्रॉल करना चाहते हैं। कोणीयज के बिना यह समान रूप से href = "स्थान # हैश" होगा। लेकिन आपका निर्देश पृष्ठ पुनः लोड होने से रोकता है।

— CMCDragonkai

मेरे निर्देशन के साथ @CMCDragonkai, मुझे यकीन नहीं है क्योंकि मैं कॉल का उपयोग $ anchorScroll के लिए करता हूं, जो ऐसा दिखता है जैसे पृष्ठ पर वर्तमान में किसी तत्व को स्क्रॉल करना केवल संभालता है। आप के साथ गड़बड़ करने के लिए हो सकता है $ स्थान या $ खिड़की पेज का एक परिवर्तन से जुड़ी कोई भी मिलता है।

— खलीलरावण

आपको स्थान बदलने की आवश्यकता है: स्थान परिवर्तन कार्यक्रम से बाहर निकलें: var बंद = गुंजाइश। $ पर ('$ locationChangeStart', फ़ंक्शन (ev) {off (); ev.preventDefault ();});

अच्छी पकड़ @EugeneTskhovrebov, मैं आगे गया और एक एडिट में उत्तर में जोड़ा।

— खलीलरावण

Answer 8

कोणीय मार्गों के लिए एक हैश उपसर्ग सेट करने का प्रयास करें $locationProvider.hashPrefix('!')

पूर्ण उदाहरण:

angular.module('app', [])
  .config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider){
      $routeProvider.when( ... );
      $locationProvider.hashPrefix('!');
    }
  ])

Comments

यह परिणाम को प्रभावित नहीं करता है। यह हालांकि मीठा होगा।

— रासमस 19

क्या आपको यकीन है। यह काम क्यों नहीं करता है? यदि हैश उपसर्ग है!, तो हैश रूटिंग # होना चाहिए! पृष्ठ। इसलिए AngularJS को यह पता लगाना चाहिए कि जब यह सिर्फ #hash है, तो इसे स्वचालित रूप से स्क्रॉल करना चाहिए और एचटीएमएल 5 मोड यूआरएल और हैश मोड यूआरएल दोनों के लिए काम करना चाहिए।

— CMCDragonkai

Answer 9

मैं अपने ऐप के लिए मार्ग तर्क में इसके आसपास मिला।

function config($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/partials/search.html',
      controller: 'ctrlMain'
    })
    .otherwise({
      // Angular interferes with anchor links, so this function preserves the
      // requested hash while still invoking the default route.
      redirectTo: function() {
        // Strips the leading '#/' from the current hash value.
        var hash = '#' + window.location.hash.replace(/^#\//g, '');
        window.location.hash = hash;
        return '/' + hash;
      }
    });
}

Comments

यह काम नहीं करता है: त्रुटि: [$ इंजेक्टर: मोडुलेर] कारण मॉड्यूल कोण को त्वरित करने में विफल रहा: त्रुटि: जब () में अवैध 'हैंडलर'

— जियोसेडिक

Answer 10

यह एक पुरानी पोस्ट है, लेकिन मैंने लंबे समय तक विभिन्न समाधानों पर शोध किया है इसलिए मैं एक और सरल साझा करना चाहता था। बस टैग target="_self"को जोड़कर <a>यह मेरे लिए तय किया। लिंक काम करता है और मुझे पृष्ठ पर उचित स्थान पर ले जाता है।

हालांकि, कोणीय अभी भी URL में # के साथ कुछ अजीबता को इंजेक्ट करता है ताकि आप नेविगेशन के लिए बैक बटन का उपयोग करने में और इस विधि का उपयोग करने के बाद परेशानी में पड़ सकें।

Answer 11

यह ngView के लिए एक नई विशेषता हो सकता है लेकिन मैं इसके साथ काम करने के लिए लंगर हैश लिंक प्राप्त कर लिया है angular-routeका उपयोग कर ngView autoscrollविशेषता और 'डबल हैश'।

ngView (ऑटोस्कोप देखें)

(निम्न कोड कोणीय-पट्टा के साथ प्रयोग किया गया था)

<!-- use the autoscroll attribute to scroll to hash on $viewContentLoaded -->    
<div ng-view="" autoscroll></div>

<!-- A.href link for bs-scrollspy from angular-strap -->
<!-- A.ngHref for autoscroll on current route without a location change -->
<ul class="nav bs-sidenav">
  <li data-target="#main-html5"><a href="#main-html5" ng-href="##main-html5">HTML5</a></li>
  <li data-target="#main-angular"><a href="#main-angular" ng-href="##main-angular" >Angular</a></li>
  <li data-target="#main-karma"><a href="#main-karma" ng-href="##main-karma">Karma</a></li>
</ul>

Answer 12

मैं ऐसा कर सकता था:

<li>
<a href="#/#about">About</a>
</li>

Answer 13

यहां कस्टम निर्देश बनाकर एक प्रकार का गंदा काम किया जाता है जो निर्दिष्ट तत्व तक स्क्रॉल किया जाएगा (हार्डकॉड "faq" के साथ)

app.directive('h3', function($routeParams) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs){        
        if ('faq'+$routeParams.v == attrs.id) {
          setTimeout(function() {
             window.scrollTo(0, element[0].offsetTop);
          },1);        
        }
    }
  };
});

http://plnkr.co/edit/Po37JFeP5IsNoz5ZycFs?p=preview

Comments

यह वास्तव में काम करता है, लेकिन यह है, जैसा कि आपने कहा, गंदा। बहुत गन्दा। आइए देखें कि क्या कोई और प्रेट्रियर समाधान के साथ आ सकता है, या मुझे इसके साथ जाना होगा।

— रासमस 19

कोणीय में पहले से स्क्रॉल-टू कार्यक्षमता बनी हुई है $anchorScroll, मेरा उत्तर देखें।

— बेन लेश

परिवर्तित प्लंकर कम गंदे होने के लिए: यह $ स्थान का उपयोग करता है। पप () तो स्रोत में कोई हार्डकोड "faq" नहीं है। और $ लंगर का उपयोग करने की भी कोशिश की, लेकिन लगता है कि राउटिंग के कारण यह काम नहीं करता है ...

— वैलेंटाइन श्योनोव

Answer 14

<a href="/#/#faq-1">Question 1</a>
<a href="/#/#faq-2">Question 2</a>
<a href="/#/#faq-3">Question 3</a>

Answer 15

यदि आप ng-clickयहां वैकल्पिक समाधान का उपयोग करना पसंद नहीं करते हैं। यह filterवर्तमान स्थिति के आधार पर सही url उत्पन्न करने के लिए उपयोग करता है । मेरा उदाहरण ui.router का उपयोग करता है ।

इसका लाभ यह है कि उपयोगकर्ता यह देखेगा कि लिंक कहां पर है।

<a href="{{ 'my-element-id' | anchor }}">My element</a>

फ़िल्टर:

.filter('anchor', ['$state', function($state) {
    return function(id) {
        return '/#' + $state.current.url + '#' + id;
    };
}])

Answer 16

एनजी मार्ग के साथ मेरा समाधान यह सरल निर्देश था:

   app.directive('scrollto',
       function ($anchorScroll,$location) {
            return {
                link: function (scope, element, attrs) {
                    element.click(function (e) {
                        e.preventDefault();
                        $location.hash(attrs["scrollto"]);
                        $anchorScroll();
                    });
                }
            };
    })

Html जैसा दिख रहा है:

<a href="" scrollTo="yourid">link</a>

Comments

क्या आपको scroll-to="yourid"निर्देश निर्दिष्ट करने और नाम निर्दिष्ट करने की आवश्यकता नहीं है scrollTo(और विशेषता तक पहुँच के रूप में; attrs["scrollTo"]इसके अलावा, element.on('click', function (e) {..})

— जेकेआई

Answer 17

आप एंकरसक्रोल का उपयोग करने की कोशिश कर सकते हैं ।

उदाहरण

तो नियंत्रक होगा:

app.controller('MainCtrl', function($scope, $location, $anchorScroll, $routeParams) {
  $scope.scrollTo = function(id) {
     $location.hash(id);
     $anchorScroll();
  }
});

और दृश्य:

<a href="" ng-click="scrollTo('foo')">Scroll to #foo</a>

... और एंकर आईडी के लिए कोई रहस्य नहीं:

<div id="foo">
  This is #foo
</div>

Answer 18

मैं अपने एंगुलर ऐप को एक एंकर ऑपॉन लोड करने के लिए स्क्रॉल करने की कोशिश कर रहा था और $ मार्गप्रोवाइडर के URL पुनर्लेखन नियमों में भाग गया।

लंबे प्रयोग के बाद मैं इस पर बस गया:

1. कोणीय एप्लिकेशन मॉड्यूल के .run () अनुभाग से एक डॉक्यूमेंट.ऑन लोड इवेंट हैंडलर रजिस्टर करें।
2. हैंडलर में यह पता करें कि मूल में एंकर टैग क्या है जो कुछ स्ट्रिंग ऑपरेशन करके होना चाहिए था।
3. ओवरराइड लोकेशन को हटा दें। एंकर टैग को हटा दिया जाए (जिसके कारण $ मार्गप्रोविडर तुरंत "#" नियम से इसे फिर से अधिलेखित कर देता है। लेकिन यह ठीक है, क्योंकि कोणीय अब URL 4 में चल रहा है) के साथ सिंक में है) कॉल $ anchorScroll ()।

angular.module("bla",[]).}])
.run(function($location, $anchorScroll){
         $(document).ready(function() {
	 if(location.hash && location.hash.length>=1)    		{
			var path = location.hash;
			var potentialAnchor = path.substring(path.lastIndexOf("/")+1);
			if ($("#" + potentialAnchor).length > 0) {   // make sure this hashtag exists in the doc.                          
			    location.hash = potentialAnchor;
			    $anchorScroll();
			}
		}	 
 });

Answer 19

अगर मैं हर समय काम करता हूं तो मुझे 100% यकीन नहीं है, लेकिन मेरे आवेदन में यह मुझे अपेक्षित व्यवहार देता है।

कहते हैं कि आप ABOUT पृष्ठ पर हैं और आपके पास निम्नलिखित मार्ग हैं:

yourApp.config(['$routeProvider', 
    function($routeProvider) {
        $routeProvider.
            when('/about', {
                templateUrl: 'about.html',
                controller: 'AboutCtrl'
            }).
            otherwise({
                redirectTo: '/'
            });
        }
]);

अब, आप HTML में

<ul>
    <li><a href="#/about#tab1">First Part</a></li>
    <li><a href="#/about#tab2">Second Part</a></li>
    <li><a href="#/about#tab3">Third Part</a></li>                      
</ul>

<div id="tab1">1</div>
<div id="tab2">2</div>
<div id="tab3">3</div>

निष्कर्ष के तौर पर

लंगर के पहले पृष्ठ का नाम शामिल करने से मेरे लिए चाल चली गई। मुझे अपने विचारों के बारे में बताएं।

नकारात्मक पक्ष यह है

यह पृष्ठ को फिर से प्रस्तुत करेगा और फिर लंगर पर स्क्रॉल करेगा।

अपडेट करें

एक बेहतर तरीका निम्नलिखित जोड़ना है:

<a href="#tab1" onclick="return false;">First Part</a>

Answer 20

अपनी स्क्रॉलिंग सुविधा आसानी से प्राप्त करें। यह अतिरिक्त सुविधा के रूप में एनिमेटेड / स्मूथ स्क्रॉलिंग का भी समर्थन करता है । कोणीय स्क्रॉल लाइब्रेरी का विवरण :

जीथब - https://github.com/oblador/angular-scroll

बोवर :bower install --save angular-scroll

npm :npm install --save angular-scroll

न्यूनतम संस्करण - केवल 9kb

चिकनी स्क्रॉलिंग (एनिमेटेड स्क्रॉलिंग) - हाँ

स्क्रॉल जासूस - हाँ

प्रलेखन - उत्कृष्ट

डेमो - http://oblador.github.io/angular-scroll/

उम्मीद है की यह मदद करेगा।

Answer 21

@Stoyan के आधार पर मैं निम्नलिखित समाधान के साथ आया:

app.run(function($location, $anchorScroll){
    var uri = window.location.href;

    if(uri.length >= 4){

        var parts = uri.split('#!#');
        if(parts.length > 1){
            var anchor = parts[parts.length -1];
            $location.hash(anchor);
            $anchorScroll();
        }
    }
});

Answer 22

रूट परिवर्तन पर यह पृष्ठ के शीर्ष पर स्क्रॉल होगा।

 $scope.$on('$routeChangeSuccess', function () {
      window.scrollTo(0, 0);
  });

इस कोड को अपने कंट्रोलर पर डालें।

Answer 23

मेरे मन में @lugsloglog के पास था, लेकिन मैं एक चीज़ बदलूंगा। मैं इसके बदले जगह का उपयोग करूंगा ताकि आपको इसे वापस सेट न करना पड़े।

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id).replace();
    $anchorScroll();
};

डॉक्स "बदलें विधि" के लिए खोजें

Answer 24

ऊपर दिए गए समाधान में से कोई भी मेरे लिए काम नहीं करता है, लेकिन मैंने बस यह कोशिश की, और यह काम किया,

<a href="#/#faq-1">Question 1</a>

इसलिए मैंने महसूस किया कि मुझे इंडेक्स पेज से शुरू करने के लिए पेज को सूचित करने की आवश्यकता है और फिर पारंपरिक लंगर का उपयोग करें।

Answer 25

शायद ही कभी angularjs के आवेदन में हैश नेविगेशन काम नहीं करता है और बूटस्ट्रैप jquery जावास्क्रिप्ट जावास्क्रिप्ट इस प्रकार के नेविगेशन का व्यापक उपयोग करते हैं, जिससे यह काम करते हैं target="_self"एंकर टैग में जोड़ें । जैसे<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

Answer 26

Https://code.angularjs.org/1.4.10/docs/api/ngRoute/provider/ $ मार्गपॉइडर देखें

[reloadOnSearch = true] - {boolean =} - केवल $ location.search () या $ location.hash () परिवर्तन होने पर रूट पुनः लोड करें।

यह झूठी स्थापित करने के लिए मेरे लिए उपरोक्त सभी के बिना चाल चली।

Answer 27

मैं AngularJS 1.3.15 का उपयोग कर रहा हूं और ऐसा लगता है कि मुझे कुछ खास करने की जरूरत नहीं है।

https://code.angularjs.org/1.3.15/docs/api/ng/provider/ $ anchorScrollProvider

तो, मेरे html में मेरे लिए निम्नलिखित काम करता है:

<ul>
  <li ng-repeat="page in pages"><a ng-href="#{{'id-'+id}}">{{id}}</a>
  </li>
</ul>
<div ng-attr-id="{{'id-'+id}}" </div>

मुझे अपने नियंत्रक या जावास्क्रिप्ट में बिल्कुल भी कोई बदलाव नहीं करना पड़ा।