जब भी कोई दृश्य खोला / दिखाया जाता है, तो एक नियंत्रक फ़ंक्शन चलाएँ


81

मैं कोणीय + आयनिक के साथ एक ऐप बना रहा हूं जो नीचे तीन आयन-टैब के साथ एक क्लासिक तीन-बटन मेनू का उपयोग करता है। जब कोई उपयोगकर्ता टैब पर क्लिक करता है, तो वह टेम्प्लेट यूआई-राउटर के माध्यम से खुलता है।

मेरे पास इस तरह के राज्य हैं:

$stateProvider
  .state('other', {
    url: "/other",
    abstract: true,
    templateUrl: "templates/other/other.html"
})

टेम्पलेट में मैं कुछ ऐसा करता हूं:

<ion-nav-view name="other" ng-init="doSomething()"></ion-nav-view>

मुझे पता है कि मैं अपने नियंत्रक में doSomething () फ़ंक्शन लिख सकता हूं और बस वहां मैन्युअल रूप से कॉल कर सकता हूं। हालांकि मुझे वही समस्या है। मुझे यह पता नहीं लग सकता है कि doSomething () फ़ंक्शन को एक से अधिक बार कैसे कॉल किया जाए, जब भी कोई उस दृश्य को खोलता है।

अभी, doSething () फ़ंक्शन को ठीक कहा जाता है, लेकिन केवल पहली बार जब दृश्य / टैब उपयोगकर्ता द्वारा खोला जाता है। जब भी कोई उपयोगकर्ता उस दृश्य या टैब को खोलता है, तो मैं एक फ़ंक्शन (जियोलोकेशन अपडेट करने के लिए) को कॉल करना चाहूंगा।

इसे लागू करने का एक सही तरीका क्या होगा?

मदद करने के लिए धन्यवाद!


{{doSomething ()}} आज़माएँ?
असिक

1
समस्या doSomething () के साथ नहीं है जैसा कि ठीक है, यह केवल दो बार ट्रिगर नहीं होगा। पहली बार देखने पर खुलता है कि यह ठीक चलता है, दूसरी बार ऐसा लगता है कि यह सिर्फ कैश्ड दृश्य या कुछ और लोड कर रहा है?
जोरे

एनजी-इनिट केवल एक बार फ़ंक्शन को कॉल करता है। आप अपने आंशिक विचारों और फ़ंक्शन में एनजी-नियंत्रक = "doSomething ()" या {{doSomething ()}} को कॉल कर सकते हैं, जब भी राउटर / आंशिक कहा जाता है तो फ़ंक्शन निकाल दिया जाता है।
Asik

3
अपने कॉन्फिग स्टेट में, अपने कैश को झूठा सेट करें। मेरे उत्तर की जाँच करें।
याकूब उबैदी

जवाबों:


46

यदि आपने अपने दृश्य के लिए एक निश्चित नियंत्रक निर्दिष्ट किया है, तो आपके नियंत्रक को हर बार आपके दृश्य लोड के लिए आमंत्रित किया जाएगा। उस स्थिति में, आप जैसे ही इसे लागू करते हैं, अपने कंट्रोलर में कुछ कोड निष्पादित कर सकते हैं, उदाहरण के लिए:

<ion-nav-view ng-controller="indexController" name="other" ng-init="doSomething()"></ion-nav-view>

और अपने नियंत्रक में:

app.controller('indexController', function($scope) {
    /*
        Write some code directly over here without any function,
        and it will be executed every time your view loads.
        Something like this:
    */
    $scope.xyz = 1;
});

संपादित करें: आप राज्य परिवर्तनों को ट्रैक करने का प्रयास कर सकते हैं और फिर कुछ कोड निष्पादित कर सकते हैं जब मार्ग बदल जाता है और एक निश्चित मार्ग का दौरा किया जाता है, उदाहरण के लिए:

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

आप यहां अधिक विवरण पा सकते हैं: राज्य परिवर्तन घटनाएँ


6
धन्यवाद, लेकिन मैं वास्तव में यही कर रहा हूं। यह कोड केवल एक बार चलेगा, पहली बार दृश्य खुला था। मैंने अपने कंसोल में कुछ लॉग करने की कोशिश की है और यह केवल पहली बार चालू होता है।
जोरे

जब आप कहते हैं कि यह आपके ऐप में काम करता है, तो क्या आप एक आयनिक ऐप के बारे में बात कर रहे हैं? मैं यह देखने की कोशिश कर रहा हूं कि क्या यह ऐसा मामला हो सकता है जो मेरे लिए काम नहीं कर रहा है।
जोरे

2
स्टेटचेंज के साथ काम करने से ट्रिक आती है, बस एक टैब पर क्लिक करने पर भी केवल एक बार चलता है। संपादन के लिए धन्यवाद!
जोरे 12

मुझे लगता है कि यह आपके ऐप के कुछ हिस्सों को इयॉन कैश करने के तरीके के साथ करना है। शायद cache-viewझूठ को स्थापित करने से मदद मिलेगी? ionicframework.com/docs/api/directive/ionView कैश-व्यू के लिए खोज करें
माइकल ट्रू

यह हाल ही में आयनिक रिलीज के साथ मुद्दा है। हालाँकि, आप रूट स्तर पर कैश को अक्षम भी कर सकते हैं। बस एक कैश जोड़ें: आपके रूट कॉन्फ़िगरेशन में प्रत्येक और हर रूट के लिए गलत।
मनीष क्र। शुक्ला

88

डिफ़ॉल्ट रूप से, आपके नियंत्रक कैश थे और यही कारण है कि आपका नियंत्रक केवल एक बार निकाल दिया गया था। एक निश्चित नियंत्रक के लिए कैशिंग बंद करने के लिए आपको अपने को संशोधित करना होगा .config(..).stateऔर cacheविकल्प को सेट करना होगा false। जैसे:

  .state('myApp', {
    cache: false,
    url: "/form",
    views: {
      'menuContent': {
        templateUrl: "templates/form.html",
        controller: 'formCtrl'
      }
    }
  })

आगे पढ़ने के लिए कृपया http://ionicframework.com/docs/api/directive/ionNavView/ पर जाएं


2
लॉगआउट नियंत्रक के लिए बहुत उपयोगी है
mrwaim

3
यह वास्तव में दुर्भाग्यपूर्ण है कि आयनिक में कैशिंग को डिफ़ॉल्ट रूप से चालू किया जाता है। ऐसा लगता है कि डिफ़ॉल्ट रूप से इसे जोड़ने के बजाय एक ऑप्ट-इन सुविधा होनी चाहिए।
oalbrecht

मुझे केवल एक राज्य को पुनः लोड करने की आवश्यकता थी इसलिए मैंने उपयोग किया: $state.go('app.statename', {}, {reload:true});( अधिक जानकारी , स्रोत )।
Sjoerd Pottuit

1
जबकि यह काम करता है यह इसके बारे में जाने का सही तरीका नहीं है। यह आपके ऐप को धीमा करने जा रहा है - यह मानते हुए कि जब भी उपयोगकर्ता हर बार उस दृश्य पर स्विच करता है, तो पूरी कंट्रोलर इनिट प्रक्रिया से गुजरना नहीं चाहता, मुझे लगता है कि jczaplew का उत्तर एक अच्छा दृष्टिकोण है।
क्रिस राए

उत्तम सामग्री। मैंने पूरे ऐप में कैशिंग अक्षम कर दिया था। खुशी है कि मैं इस जवाब में आया था
रॉबर्ट Ngetich

50

एलेक्समार्ट के उत्तर और लिंक पर कुछ इस तरह काम करता है:

.controller('MyCtrl', function($scope) {
  $scope.$on('$ionicView.enter', function() {
     // Code you want executed every time view is opened
     console.log('Opened!')
  })
})

3
$ionicView.beforeEnterशायद तुम क्या चाहते हो "दृश्य पूरी तरह से प्रवेश कर गया है" के बाद$ionicView.enter आग । यदि आप एनिमेटेड दृश्य संक्रमण का उपयोग कर रहे हैं, तो आपके संक्रमण शुरू होने से पहले निष्पादित का उपयोग करना। इसका मतलब यह है कि आप संक्रमण के दौरान अपना कोड चला रहे होंगे जो संभवतः आपके ऐप में "स्नैपर" महसूस होगा। $ionicView.beforeEnter
रिनोगो

मुझे लगता है कि यह सिर्फ सबसे सरल और साफ जवाब है। @Rinogo टिप्पणी के बारे में, मुझे लगता है कि प्रत्येक प्रोग्रामर यह तय कर सकता है कि दृश्य / नियंत्रक में जो कुछ भी होता है, उसके अनुसार "दर्ज करें" या "पहले" का उपयोग करें। यहां समझने वाली महत्वपूर्ण बात यह है कि आप अपने विचार दर्ज करने के लिए हर बार फ़ंक्शन को कॉल करने के लिए जीवन चक्र की घटनाओं को संभाल सकते हैं।
जकारबलो

12

मैं एक ही समस्या का सामना कर रहा था, और यहाँ मैं एक ही मुद्दे के साथ अन्य सभी के लिए इस व्यवहार का कारण छोड़ता हूं।

जीवनचक्र देखें

प्रदर्शन में सुधार करने के लिए, हमने तत्वों और गुंजाइश डेटा को कैश करने के लिए आयनिक की क्षमता में सुधार किया है। एक बार एक नियंत्रक शुरू होने के बाद, यह ऐप के जीवन भर बना रह सकता है; यह सिर्फ घड़ी चक्र से छिपा और हटा दिया गया है। चूंकि हम गुंजाइश का पुनर्निर्माण नहीं कर रहे हैं, हमने उन घटनाओं को जोड़ा है जिनके लिए हमें घड़ी चक्र में फिर से प्रवेश करते समय सुनना चाहिए।

पूरा विवरण और $ आयनिक दृश्य देखने के लिए यहां जाएं: http://ionicframework.com/blog/navigating-thechanges/


9

आप कैश को कैश-व्यू = "झूठे" के साथ दृश्य अक्षम क्यों नहीं करते हैं ?

अपने विचार में इसे आयन-नव-दृश्य से इस तरह जोड़ें:

<ion-nav-view name="other" cache-view="false"></ion-nav-view>

या अपने राज्यप्रोवाइडर में:

$stateProvider.state('other', {
   cache: false,
   url : '/other',
   templateUrl : 'templates/other/other.html'
})

या तो आपके नियंत्रक को हमेशा बुलाया जाएगा।


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

शायद, हाँ @ सिंदूर। लेकिन कुछ मामला है जो आवश्यक है। मेरे लिए, मेरे पास दृश्य पर एक ड्राइंग ड्राइंग है और मैं यह पता नहीं लगा सका कि इसे कैसे साफ किया जाए।
डिओगो मेडेइरोस

यह मेरे मामले के लिए एक सही समाधान था, मैं उपयोगकर्ता को लॉग आउट कर रहा था फिर नियंत्रक पर जाकर, मैं कैश नहीं करना चाहता, और सब कुछ फिर से आरंभीकृत किया जाना चाहिए। धन्यवाद!
फिरास अब्द अल्रहमान

5

उदाहरण के लिए @ मिचेल ट्रू,

अपने कंट्रोलर के अंदर इस कोड को डालें। जब यह स्थिति दर्ज की जाती है या सक्रिय होती है, तो आप हर बार चलेंगे, आपको कैश को अक्षम करने के बारे में चिंता करने की आवश्यकता नहीं है और यह एक बेहतर तरीका है।

.controller('exampleCtrl',function($scope){
$scope.$on('$ionicView.enter', function(){
        // Any thing you can think of
        alert("This function just ran away");   
    });
})

आपके पास $ ionicView.beforeEnter -> जैसे लचीलेपन के और भी उदाहरण हो सकते हैं जो किसी दृश्य के दिखाए जाने से पहले चलते हैं। और इसमें कुछ और भी हैं।


2

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

$ionicConfigProvider.views.maxCache(0);

इसके अलावा, जिस तरह से मेरे पास मेरे लिए काम कर रहा था वह कर रहा था

$scope.$on("$ionicView.afterLeave", function () {
     $ionicHistory.clearCache();
}); 

यह आपके द्वारा फिर से वापस दर्ज करने के लिए नियंत्रक को फिर से चलाने के लिए दृश्य को छोड़ने से पहले कैश को साफ़ करना है।


1

यह शायद आप क्या देख रहे थे:

आयोनिक आपके विचारों को कैश करता है और इस प्रकार आपके नियंत्रक डिफ़ॉल्ट रूप से (अधिकतम 10) http://ionicframework.com/docs/api/directive/ionView/

ऐसी घटनाएं हैं जिन पर आप हुक कर सकते हैं ताकि आपके नियंत्रक उन आयनिक घटनाओं के आधार पर कुछ चीजें कर सकें। एक उदाहरण के लिए यहाँ देखें : http://ionicframework.com/blog/navigating-the-changes/


1
केवल एक लिंक साझा करने के बजाय उदाहरण कोड दिखा कर सुधारा जा सकता है
लॉरेंस वेरु

क्या एंगुलर जेएस पर भी ऐसा कुछ है?
वांग'ल पखरीन

@ Wang'lPakhrin डिफ़ॉल्ट रूप से, किसी भी कोड, IIFE या फ़ंक्शन जिसे आप घोषित करते हैं और अपने मुख्य नियंत्रक फ़ंक्शन के अंदर चलाते हैं, प्रत्येक बार दृश्य (और इस प्रकार नियंत्रक) लोड होने पर निष्पादित किया जाएगा। यदि आपको अपने एप्लिकेशन के जीवनकाल में एक बार किसी फ़ंक्शन को निष्पादित करने की आवश्यकता है, तो कोणीय-यू-राउटर चिपचिपा राज्यों ViewContentLoadingऔर ViewContentLoadedघटनाओं की जांच करें :)
माइकल ट्रू

0

मुझे आयनिक के साथ एक समान समस्या थी जहां मैं कैमरा टैब का चयन करते ही देशी कैमरे को लोड करने की कोशिश कर रहा था। मैंने कैमरे के टैब (tabs.html में) के लिए आयन-व्यू कंपोनेंट को कंट्रोलर सेट करके और फिर $ स्कोप मेथड को कॉल करके समस्या का समाधान किया जो मेरे कैमरे को लोड करता है (addImage)।

Www / टेम्पलेट्स / tabs.html में

  <ion-tab title="Camera" icon-off="ion-camera" icon-on="ion-camera" href="#/tab/chats" ng-controller="AddMediaCtrl" ng-click="addImage()">
    <ion-nav-view  name="tab-chats"></ion-nav-view>
  </ion-tab>

AddMediaCtrl में परिभाषित AddImage विधि देशी कैमरा को हर बार "कैमरा" टैब पर क्लिक करने पर लोड करती है। मुझे काम करने के लिए कोणीय कैश में कुछ भी बदलना नहीं था । आशा है कि ये आपकी मदद करेगा।

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