2015-03-16 8 views
7

तो मैं अपने आवेदन में यूआई-राउटर का उपयोग कर रहा हूं और लोडर को छिपाने के लिए लोडर और $stateChangeSuccess दिखाने के लिए $stateChangeStart श्रोता का उपयोग कर रहा हूं। इस तरह मेरे पास राज्य संक्रमण के बीच एक लोडर है।यूई-राउटर में राज्य परिवर्तन रद्दीकरण के बारे में कैसे सूचित किया जाए?

$rootScope.$on('$stateChangeStart', 
       function (event, toState, toParams, fromState, fromParams) { 
///show loader 
}); 

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

समस्या:

  1. मैं राज्य एक
  2. मैं राज्य बी में जाने के लिए एक बटन पर क्लिक करें, $stateChangeStart बी के लिए कहा जाता है में हूँ, मेरे लोडर दिखाया गया है।
  3. तुरंत मैं एक बटन पर क्लिक करें राज्य के लिए एक जाने के लिए (बी संकल्प करने के लिए कुछ सामान है, इसलिए वहाँ समय से पहले बी के यूआई वास्तव में लोड हो रहा है शुरू होता है है)
  4. बी लोड नहीं है, और $stateChangeSuccess कहा जाता है और नहीं है मेरी लोडर छिपा कभी नहीं किया गया है (जब से हम एक में पहले से ही थे, यह पुनः लोड नहीं है)

तो वहाँ एक तरह से मैं और मेरे लोडर को छिपाने स्थिति परिवर्तन रद्द के लिए सुन सकते हैं?

अद्यतन: मैंने Plunk बनाया। प्लंक में मैंने बी के संकल्प में 10 सेकंड का टाइमआउट दिया है। तो इससे पहले कि यह हल हो जाए, ए पर क्लिक करें। राज्य परिवर्तन श्रोता घटनाओं के लिए कंसोल की निगरानी करें।

अद्यतन 25 जुलाई, 2015 जो नवीनतम कोणीययूआई राउटर का उपयोग करता है: नया Plunk बनाया गया।

+1

आप आसानी से इस लक्ष्य को हासिल कर सकते हैं अपडेट किया गया एक सेवा के अंदर स्थिति परिवर्तन जानकारी को बनाए रखने ... – harishr

+0

@entre द्वारा लेकिन जब एक रद्द हुआ है मुझे पता नहीं होगा। –

+0

क्या पहले Google परिणाम में कुछ गड़बड़ है - https://github.com/angular-ui/ui-router/wiki#state-change-events? –

उत्तर

3

अब तक पाया गया एकमात्र टिकाऊ समाधान ui-sref का उपयोग करने से बचाना था। यह $state.go का रिटर्न वैल्यू मास्क करता है जो इस मामले में महत्वपूर्ण है।

चाल हालांकि संक्रमण के बीच संपत्ति null है और घटनाओं में से किसी में $state.transition संपत्ति के माध्यम से पहुँचा जा सकता है कि $state प्रसारण यह भी है transition वादा $state.go

$scope.safeGo = function(stateName){ 
    var transition = $state.go(stateName); 
    transition.then(function(currentState){ 
    console.log('Transition finished successfully. State is ' + currentState.name); 
    }) 
    .catch(function(err){ 
    //revert your loader animation here 
    console.log('Transition failed. State is ' + $state.current.name, err); 
    }) 
} 

एक ही वस्तु द्वारा लौटाए को संभालने के लिए है null। इस प्रकार एकमात्र ठोस विकल्प $state.go के वापसी मूल्य को पकड़ना है।

से पहले BB के लिए transition वादा एक कारण Error: transition superseded साथ अस्वीकार कर देंगे हल किया गया था जब राज्य A चयन किया जाता है। हालांकि आपको अभी भी B.resolve पूरा होने तक प्रतीक्षा करनी होगी। यदि आप इससे बचना चाहते हैं तो आपको अपने राज्यों का ट्रैक रखना होगा, क्योंकि A में संक्रमण तुरंत हल हो जाएगा (क्योंकि वर्तमान स्थिति अभी भी A है जबकि B हल करने का प्रयास कर रहा है)।

plunker

संबंधित मुद्दे

 संबंधित मुद्दे