2014-12-26 8 views
7

In this plunk आपके पास दो यूई-राउटर राज्य, माता-पिता और बच्चे हैं। जब लिंक पर क्लिक करके बच्चे को बुलाया जाता है, क्योंकि इसमें reload: true विकल्प होता है तो इसे हमेशा पुनः लोड किया जाता है। यह ठीक है, लेकिन समस्या यह है कि अभिभावक राज्य को भी पुनः लोड किया जाता है। कई बार 'पॉप्युलेट 11' लिंक पर क्लिक करने का प्रयास करें और आप देखेंगे कि पैरेंट टाइमस्टैम्प भी बदलता है।एंगुलरजेएस यूई-राउटर: पुनः लोड: सत्य भी मूल स्थिति को पुनः लोड करता है

मैं केवल बच्चे को फिर से लोड कैसे कर सकता हूं?

जावास्क्रिप्ट:

var app = angular.module("app", ['ui.router']); 

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

    $urlRouterProvider.otherwise("/"); 

    $stateProvider 
    .state('state1', { 
      templateUrl: 'state1.html', 
      controller: function($scope) { 

      $scope.theTime1 = Date.now(); 

      } 
    }) 
    .state('state1.state11', { 
      templateUrl: 'state11.html', 
      controller: function($scope) { 

       $scope.theTime11 = Date.now(); 

     } 
    }); 

}); 

उत्तर

10

यह वास्तव में बहुत सरल है।

reload का उपयोग न करें क्योंकि यह वही करता है जो आपको मिला। यह मार्ग के लिए सब कुछ पुनः लोड करता है।

इसके बजाय, अपने बच्चे के रूट में पैरामीटर जोड़ें और जब भी लिंक क्लिक किया जाता है तो उस पैरामीटर को बदलना सुनिश्चित करें। इससे बच्चे के राज्य को फिर से लोड किया जा सकेगा।

मैंने आपके प्लंक को एक उदाहरण के साथ अपडेट किया। मैंने अभी num पैरामीटर जोड़ा है और प्रत्येक बार लिंक क्लिक होने पर count चर बढ़ाएं।

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

6

एक Mathew Foscarini के रूप में पैरामीटर बदलते सुझाव दिया है, रास्ते जाने के लिए (पक्का)। राज्य रीलोडर के साथ एक और समाधान भी हो सकता है। नीचे, और this updated plunker में हम सरलीकृत संस्करण देख सकते हैं, लेकिन हम भी वहाँ कुछ पैरामीटर पारित कर सकते हैं इसे और अधिक सामान्य

.state('state1.reloader', { 
     controller: function($state) { 
     $state.go('state1.state11') 
     } 
}) 

बनाने के लिए और हम इसे की तरह कॉल कर सकते हैं:

// instead of this 
<a href="#" ui-sref="state1.state11" ui-sref-opts="{reload: true}"> 
// we can do this 
<a href="#" ui-sref="state1.reloader" > 

की जाँच करें यह here

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