क्लियर हिस्ट्री एंड रीलोड पेज on लॉगिन / लॉगआउट Ionic फ्रेमवर्क का उपयोग करना


80

Ionic के साथ मोबाइल एप्लिकेशन विकास में मैं नया हूं। लॉगिन और लॉगआउट पर, मुझे डेटा को ताज़ा करने के लिए पृष्ठ को फिर से लोड करने की आवश्यकता है, हालांकि, $state.go('mainPage')उपयोगकर्ता को पुनः लोड किए बिना दृश्य पर वापस ले जाता है - इसके पीछे नियंत्रक कभी भी लागू नहीं होता है।

क्या इतिहास को साफ़ करने और आयोनिक में राज्य को फिर से लोड करने का कोई तरीका है?

जवाबों:


124

ढांचे में आपका स्वागत है! वास्तव में आयनिक में रूटिंग ui- राउटर द्वारा संचालित है । आप शायद इसे पूरा करने के लिए अलग-अलग तरीकों की एक जोड़ी खोजने के लिए इस पिछले एसओ प्रश्न की जांच करें।

यदि आप केवल उस राज्य को पुनः लोड करना चाहते हैं जिसका आप उपयोग कर सकते हैं:

$state.go($state.current, {}, {reload: true});

यदि आप वास्तव में पृष्ठ को पुनः लोड करना चाहते हैं (जैसा कि, आप सब कुछ फिर से बूटस्ट्रैप करना चाहते हैं) तो आप उपयोग कर सकते हैं:

$window.location.reload(true)

सौभाग्य!


मैं index.html में दूरस्थ सर्वर से खींची गई सभी css / js फ़ाइलों को बंडल करना चाहता हूं। लेकिन अगर कोई बदलाव हुआ है तो मैं केवल इन को फिर से लोड करना पसंद करूंगा। मुझे यह कैसे संरचना करनी चाहिए?
मायलॉर्ड

यकीन नहीं होता अगर मैं आपको @mylord समझता हूँ। क्या आप लाइव रीलोड की बात कर रहे हैं? हो सकता है कि आप Html5 ऑफ़लाइन कैश में रुचि रखते हैं / जैसा कि यहां चर्चा की गई है: tmkmobile.wordpress.com/2012/03/04/html5-offline-solution मुझे लगता है कि आप सवाल के मूल इरादे के अलावा कुछ करने की कोशिश कर रहे होंगे।
जिम डेडेव

13
$ state.go ($ state.current, {}, {reload: true}); यह समाधान मेरे लिए काम नहीं करता है।
IStStalker 14

@IamStalker आप एक उदाहरण के रूप में कोई और जानकारी या शायद एक कोडपेन / फिडल / प्लंक प्रदान कर सकते हैं?
जिमइनडेव

9
$state.go($state.current, {}, {reload: true});cache:trueराज्य परिभाषा में अगर (जो कि डिफ़ॉल्ट कैश है तो) काम नहीं करता है । #Ionic 1.0.0-RC2 और 1.0.0 में परीक्षण किया गया। मेरा जवाब देखिए।
ABCD.ca

25

मैंने पाया कि जिम डेदेव के उत्तर ने केवल तभी काम किया जब राज्य की परिभाषा cache:falseनिर्धारित की गई थी । कैश्ड दृश्य के साथ, आप कर सकते हैं $ionicHistory.clearCache()और फिर $state.go('app.fooDestinationView')यदि आप एक राज्य से दूसरे तक नेविगेट कर रहे हैं जो कैश है, लेकिन ताज़ा करने की आवश्यकता है।

मेरा उत्तर यहां देखें क्योंकि इसमें आयोनिक के लिए एक सरल बदलाव की आवश्यकता है और मैंने एक पुल अनुरोध बनाया: https://stackoverflow.com/a/30224972/756177


1
अच्छी चीज़। मैं वास्तव में अपने ईओण ऐप में इसका उपयोग नहीं करता हूं इसलिए मैं कैशिंग कार्यक्षमता के साथ फॉलोअप की सराहना करता हूं। ऐसा लगता है कि आपका PR, 1.0.1 में जा रहा है। एक बार जारी होने के बाद, मैं अपनी मूल पोस्ट में आपको नोट करूंगा और लोगों को देखने के लिए प्रेरित करूंगा।
जिमइनडेव

18

सही जबाव:

$window.location.reload(true);

1
इस उत्तर को निम्न गुणवत्ता के रूप में चिह्नित किया गया है। क्या आप यह समझाने की कोशिश कर सकते हैं कि यह सही उत्तर क्यों है?
जॉर्ज लेइताओ

1
क्योंकि यह $windowइसके बजाय का उपयोग करता हैwindow
EpokK

आप इसमें सही हैं। यदि आप .location.reload सिंटैक्स के साथ जाते हैं, तो यह $ विंडो का उपयोग करने के लिए समझ में आता है। मैंने अपना उत्तर ऊपर ही बदल दिया है ताकि हम भविष्य के पाठकों के लिए सुसंगत हों। $ State.go सिंटैक्स कुछ मामलों में उपयोगी हो सकता है।
जिम द डेव

केवल इस जवाब ने मेरी मदद की है, न कि एक टिक
माइकल

मैं उस दृष्टिकोण को पसंद करता था, लेकिन कुछ लोगों ने बताया कि यह कुछ उपकरणों (एंड्रॉइड 4.4, क्रोम) पर पुनः लोड के अनंत लूप का कारण बनता है।
ओलेग चेरेमिसिन

18

मैंने एक समाधान ढूंढ लिया है जिससे मुझे इसे पूरा करने में मदद मिली। टैग cache-view="false"पर सेट करने से ion-viewमेरी समस्या हल हो गई।

<ion-view cache-view="false" view-title="My Title!">
  ....
</ion-view>

अक्षम कैशे दृश्य प्रदर्शन का एक महत्वपूर्ण नुकसान है जो आपको इस विकल्प से बचना चाहिए। इसके बजाय आप ionicView घटनाओं को संभाल सकते हैं। देखें: stackoverflow.com/questions/25192172/…
ezain

@ezain, क्या आप मुझे बता सकते हैं कि प्रदर्शन कैसे प्रभावित होता है?
राजेश्वर

@ राजेश्वर, जब कैश सिस्टम सक्षम होता है, तो आयोनिक छिपे हुए दृश्य द्वारा उत्पन्न सभी DOM को बनाए रखता है और जब एक परिवर्तन दृश्य होता है तो आपको DOM को पुनर्गणना करने की आवश्यकता नहीं होती है। यदि आपके पास एक भारी डोम है और आपको इसे सभी संक्रमण परिवर्तन में उत्पन्न करने की आवश्यकता है तो आप संक्रमण एनिमेशन में अंतराल की सराहना कर सकते हैं। यदि आप केवल अक्षम कैश का कारण पुनः लोड करते हैं, तो नियंत्रक आयनिक व्यू घटनाओं का उपयोग करता है।
14

@ezain, कैश को अक्षम करने की इस सुविधा को लागू करने के कई तरीके हैं। मैंने उनमें से लगभग सभी की कोशिश की, मेरे लिए कुछ भी काम नहीं किया। और इसने मुझे वही दिया जो मुझे चाहिए। और मुझे उस पृष्ठ को लोड करते समय कोई काफी पिछड़ापन नहीं दिखाई देता है, भले ही वह पृष्ठ बहुत बड़ा हो। इसलिए मैंने अन्य तरीकों की तुलना में इस तरह से पसंद किया।
राजेश्वर

11

पृष्ठ को पुनः लोड करना सबसे अच्छा तरीका नहीं है।

आप दृश्य को पुनः लोड किए बिना डेटा को पुनः लोड करने के लिए राज्य परिवर्तन की घटनाओं को संभाल सकते हैं।

आयनिक व्यू जीवन-चक्र के बारे में यहां पढ़ें :

http://blog.ionic.io/navigating-the-changes/

और डेटा पुनः लोड करने से पहले घटना को संभाल लें।

$scope.$on('$ionicView.beforeEnter', function(){
  // Any thing you can think of
});

यह सबसे अच्छा तरीका लगता है।
मार्कौ

विशेष रूप से आप जांच सकते हैं कि क्या राज्य कैश से है, और यदि ऐसा है, तो इसे ताज़ा करने के लिए अपने कुछ API को कॉल करें:$scope.$on('$ionicView.beforeEnter', function(scopes, states) { if (states.fromCache) { ... } }
jakub.g

@ jakub.g यदि आप किसी दृश्य को कैश नहीं करना चाहते हैं तो आप इस विशिष्ट दृश्य के लिए कैश को अक्षम कर सकते हैं, अधिक सरल है।
इज़ैन

6

मेरे मामले में मुझे केवल दृश्य को साफ़ करने और नियंत्रक को पुनरारंभ करने की आवश्यकता है। मैं इस स्निपेट के साथ अपना इरादा प्राप्त कर सकता हूं:

$ionicHistory.clearCache([$state.current.name]).then(function() {
  $state.reload();
}

कैश अभी भी काम कर रहा है और लगता है कि बस दृश्य साफ हो गया है।

ionic --version 1.7.5 कहते हैं।


एक परिशिष्ट: जब राज्य में पैरामीटर होते हैं, तो आपको उन्हें दृश्य / राज्य पहचान में परिभाषित करना होगा। इस
पास्टबिन की

अपने कोड में इरोस सही संस्करण $ ionicHistory.clearCache ([$ state.current.name])। तब (फ़ंक्शन () {$ state.reload ();});
किरिल ए

बस एक कोष्ठक गायब है
user623396

1

ऊपर वर्णित समाधानों में से कोई भी होस्टनाम के लिए काम नहीं करता है जो इससे अलग है localhost!

मुझे उन notify: falseविकल्पों की सूची में शामिल होना था $state.go, जिनसे मैं गुजरता हूं , कोणीय परिवर्तन श्रोताओं को कॉल करने से बचने के लिए , कॉल करने से पहले $window.location.reload। अंतिम कोड इस तरह दिखता है:

$state.go('home', {}, {reload: true, notify: false});

>>> EDIT - आपके ब्राउज़र के आधार पर $ timeout आवश्यक हो सकता है >>>

$timeout(function () { $window.location.reload(true); }, 100);

EDIT के <<< अंत <<<

यूआई-राउटर संदर्भ पर इसके बारे में अधिक ।


0

मैं angularjs का उपयोग करके पृष्ठ को ताज़ा करने की कोशिश कर रहा था जब मैंने वेबसाइटों को देखा तो मैं भ्रमित हो गया था, लेकिन कोई कोड कोड के लिए काम नहीं कर रहा था, तब मुझे पेज को पुनः लोड करने के लिए समाधान मिला

$state.go('path',null,{reload:true});

एक फ़ंक्शन में इसका उपयोग करें यह काम करेगा।


0

मुझे स्क्रॉलबार काम करने के लिए राज्य को फिर से लोड करने की आवश्यकता है। दूसरे राज्य से आते समय उन्होंने काम नहीं किया - 'पंजीकरण'। यदि एप्लिकेशन को पंजीकरण के बाद बंद कर दिया गया और फिर से खोला गया, तो यह सीधे 'होम' स्थिति में चला गया, स्क्रॉलबार ने काम किया। उपरोक्त समाधानों में से किसी ने भी काम नहीं किया।

पंजीकरण के बाद, मैंने प्रतिस्थापित किया:

$state.go("home");

साथ में

window.location = "index.html"; 

एप्लिकेशन पुनः लोड किया गया, और स्क्रॉलबर्स ने काम किया।


0

नियंत्रक को केवल एक बार कहा जाता है, और आप इस तर्क मॉडल को संरक्षित करते हैं, जो मैं आमतौर पर करता हूं:

मैं एक विधि बनाता हूं $scope.reload(params)

इस पद्धति की शुरुआत में मैं $ionicLoading.show({template:..})अपने कस्टम स्पिनर को दिखाने के लिए कहता हूं

जब पुन: लोड प्रक्रिया समाप्त हो सकती है, तो मैं $ionicLoading.hide()कॉलबैक के रूप में कॉल कर सकता हूं

अंत में, बटन REFRESH के अंदर, मैं जोड़ता हूं ng-click = "reload(params)"

इस समाधान का एकमात्र नकारात्मक पहलू यह है कि आप आयनिक नेविगेशन इतिहास प्रणाली खो देते हैं

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


0

यदि आप दृश्य परिवर्तन के बाद पुनः लोड करना चाहते हैं, तो आपको इसकी आवश्यकता होगी

$state.reload('state',{reload:true});

यदि आप उस नए "रूट" को देखना चाहते हैं, तो आप आयनिक को बता सकते हैं कि अगला दृश्य यह रूट होने वाला है

 $ionicHistory.nextViewOptions({ historyRoot: true });
 $state.go('app.xxx');
 return;

यदि आप प्रत्येक दृश्य परिवर्तन के बाद अपने नियंत्रकों को फिर से लोड करना चाहते हैं

app.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

$ionicConfigProvider.views.maxCache(0);


0

जैसा कि @ezain ने अपने आवश्यक होने पर ही नियंत्रकों को पुनः लोड करने का संकेत दिया है। नियंत्रक को फिर से लोड करने के बजाय राज्यों को बदलते समय डेटा को अपडेट करने का एक और क्लीनर तरीका प्रसारण घटनाओं का उपयोग कर रहा है और नियंत्रकों में ऐसी घटनाओं को सुन रहा है जिन्हें विचारों पर डेटा अपडेट करने की आवश्यकता होती है।

उदाहरण: अपने लॉगिन / लॉगआउट कार्यों में आप ऐसा कुछ कर सकते हैं:

$scope.login = function(){
    //After login logic then send a broadcast
    $rootScope.$broadcast("user-logged-in");
    $state.go("mainPage");
};
$scope.logout = function(){
   //After logout logic then send a broadcast
   $rootScope.$broadcast("user-logged-out");
   $state.go("mainPage");
};

अब अपने मेनपेज कंट्रोलर में मेनपेज कंट्रोलर के भीतर प्रसारण सुनने के लिए फंक्शन पर $ का उपयोग करके व्यू में बदलावों को ट्रिगर करें:

$scope.$on("user-logged-in", function(){
     //update mainPage view data here eg. $scope.username = 'John';
});

$scope.$on("user-logged-out", function(){
    //update mainPage view data here eg. $scope.username = '';
});

-1

मैंने कई तरीके आजमाए, लेकिन पाया कि यह तरीका बिल्कुल सही है:

$window.location.reload();

आशा है कि यह दूसरों को मेरे जैसे दिनों के संस्करण के लिए अटकाने में मदद करेगा: कोणीय 1.5.5, आयनिक 1.2.4, कोणीय-यूआई-रूटर 1.0.0

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.