$ state.go यूआरएल

Question

नहीं बदल रहा है, मैं ui-राउटर के साथ Angular.js 1.3 का उपयोग कर रहा हूं। मेरे पास 3 पेज हैं, पेज 1.html, पेज 2.html, पेज 3.html।

जब उपयोगकर्ता पेज 1 पर क्लिक करता है, तो पेज 2 खुल जाएगा, लेकिन मैं पृष्ठ 1 की स्क्रॉल स्थिति को सहेजना चाहता हूं, जहां उपयोगकर्ता क्लिक करने से पहले था, ताकि बैक बटन पर क्लिक करने के बाद वह उसी स्क्रॉल स्थिति पर उतर सके।

इसे सुलझाने के लिए मैं iframe में, page1.html से अधिक page2.html खोला, और यह page1.html में प्रदर्शन के लिए निरपेक्ष स्थिति दे रही है, और मैं उपयोग कर रहा हूँ:

history.pushState({}, '', '/page2.html');

यूआरएल बदलने के लिए। यह कार्यान्वयन ठीक काम कर रहा है।

अब उपयोगकर्ता page2.html पर दिए गए लिंक पर क्लिक करते हैं, यह page3.html खोलना चाहिए, एक सामान्य लिंक, जिसके लिए मैं प्रयोग किया जाता है जैसे:

$state.go("page3") 

समस्या अब राज्य प्रभार है, और पृष्ठ 3 एचटीएमएल लोड, लेकिन यूआरएल अभी भी /page2.html है, यूआरएल बदल नहीं रहा है।

मैं भी करने की कोशिश की:

history.pushState({}, '', '/page3.html'); 

फिर भी यूआरएल में बदलाव नहीं किया गया है। कोई भी जानता है कि यह क्यों हो रहा है।

Answer 1

भले ही आप जिस समाधान को कार्यान्वित करने की कोशिश कर रहे हैं वह बहुत रचनात्मक है, मैं वास्तव में एक और दिशा चुनूंगा।

आपके पास कई विकल्प हैं, जिनमें से सभी स्क्रॉल स्थिति को कहीं भी कैशिंग पर भरोसा करते हैं। उदाहरण के लिए:

var scrollTopData = {}; 

function changeState (toState) { 
    var currentStateName = $state.current.name; 
    scrollTopData[currentStateName] = window.scrollY; 
    $state.go(toState); 
} 

तब सवाल यह है कि आपके द्वारा कैश किए गए स्क्रॉल स्थिति के साथ क्या करना है। $state.go एक वादा देता है, तो एक समाधान होगा:

var scrollTopData = {}; 

function changeState (toState) { 
    var currentStateName = $state.current.name; 
    scrollTopData[currentStateName] = window.scrollY; 

    $state.go(toState).then(function() { 
     if (toState in scrollTopData) { 
      window.scrollTo(0, scrollTopData[toState]); 
     } 
    }); 
} 

आपके क्रियान्वयन के आधार, आप भी asgoth के जवाब इस्तेमाल कर सकते हैं:

मैं इसे पहले उपयोग नहीं किया है, लेकिन कोणीय एक है $anchorScroll सेवा। डेटा को पुनः लोड करने के लिए, आप इसे $cacheFactory का उपयोग करके कैश कर सकते हैं, या डेटा को उच्च दायरे पर संग्रहीत कर सकते हैं।

एक और समाधान stateChangeEvent का उपयोग करना होगा। उदाहरण के लिए:

$rootScope.$on('$stateChangeSuccess', 
    function (event, toState, toParams, fromState, fromParams) { 
     // Do magic 
    } 
); 

मेरी सलाह $state.go द्वारा दिए गए वादे का उपयोग करना होगा।

Answer 2

यदि आप कोणीय के डिफ़ॉल्ट व्यवहार को बदलते हैं तो आप url में कोई परिवर्तन नहीं कर सकते हैं। हैश के बाद यूआरएल में हिस्सा स्वचालित रूप से बदल जाता है। क्योंकि आप /somepage.html को

/#somepage.html

टिप्पणी हैश (#) यहाँ जोड़ा जैसे कुछ बात की कोशिश ब्राउज़र मजबूर आप को बदलने यूआरएल नहीं है।