ब्राउज़र पर यूई-राउटर पैरामीटर को कैसे सुरक्षित रखें

Question

मेरे एसपीए के राज्यों को प्रबंधित करने के लिए कोणीय यूई-राउटर का उपयोग कर रहा हूं। मैं इस मार्ग है:

.state('index.administration.security.roleEdit', { 
       url: '/roleEdit', 
       templateUrl: 'app/administration/security/role/roleEdit.html', 
       controller: 'roleEditCtrl', 
       controllerAs: 'roleEditCtrl', 
       params: { data: null }, 
       resolve: { 
        role: function ($stateParams) { 
         return angular.fromJson($stateParams.data); 
        }, 
        modules: function (securityService) { 
         return securityService.getAllModules(); 
        }      
       } 
      }) 

इसके अलावा, मैं json वस्तु के रूप में 'डेटा' पैरामीटर गुजर रहा हूँ राज्य के लिए। अब जब मैं पहली बार इस राज्य को लोड करता हूं, तो सब कुछ ठीक है। लेकिन जब मैं ब्राउज़र रीफ्रेश करता हूं (F5 कुंजी) $ stateParams.data राज्य के समाधान कार्य में शून्य है।

मैं इसे कैसे हल कर सकता हूं? मुझे ये संभावित समाधान दिखाई देते हैं: 1. किसी भी तरह पैरामीटर 2. ब्राउज़र रीफ्रेश ओवरराइड करें (पता नहीं कैसे) ऐप को रीफ्रेश करने वाले ब्राउज़र को रोकने के लिए ओवरराइड करें। 3. गेटो अन्य भाई राज्य ताज़ा करने पर।

कृपया मदद

अद्यतन ठीक है, मैं डेटा इस तरह सेट करें:

vm.editRole = function(roleId){ 
    var role = dataService.getRoleById(roleId).then(function(result){ 
      $state.go('roleEdit', {data:angular.toJson(result)}); 
      }); 
} 

अद्यतन 2 roleEdit नियंत्रक इस तरह दिखता है:

(function(){ 
    angular.module('app.administration').controller('roleEdit', 
    ['role','modules', '$scope', 'securityService', '$state', roleEditCtrl]); 

    function roleEditCtrl('role', 'modules',$scope, securityService, $state){ 
     var vm = this; 
     vm.roles = roles; 
     vm.originalRole = angular.copy(role); 
     vm.modules=modules; 
     vm.saveChanges = _saveChanges; 
     vm.cancel = _cancel; 

     return vm; 

     function _saveChanges(){ 
      securityService.UpdateRole(vm.role).then(function(result){ 
       $staste.go('^.roles'); 
      } 
     } 

     function _cancel(){ 
      vm.role = angular.copy(vm.originalRole); 
      $sscope.roleEditForm.$setPristine();    
     } 
    } 
})(); 

Answer 1

मैं करूंगा विकल्प 2 से दूर रहें। आप नहीं चाहते हैं एक ब्राउज़र के अपेक्षित व्यवहार गड़बड़ करो।

हो सकता है कि आप अपने संकल्प को वस्तु आला में अपने डेटा refactor सकता है:

resolve: { 
      role: function ($stateParams) { 
       return angular.fromJson($stateParams.data); 
      }, 
      modules: function (securityService) { 
       return securityService.getAllModules(); 
      }, 
      data: function (dataService) { 
       return dataService.retrieveStoredData(); 
      } 

जहाँ आपके dataService एक सेवा आपको लगता है कि डाटा स्टोर करने के लिए उपयोग हो सकता है अगर यह वास्तव में है कि महत्वपूर्ण (कुकीज़ या LocalStorage के माध्यम से)।

ब्राउज़र फ़ील्ड रीफ्रेश पर उस फ़ील्ड को पॉप्युलेट करने की अपेक्षा करने का कोई उचित तरीका नहीं है यदि आपने पहले इसे जावास्क्रिप्ट को निष्पादित करने के लिए जावास्क्रिप्ट निष्पादित किया था।

Answer 2

एक ही समस्या थी, अगर किसी और को इसकी आवश्यकता हो तो इसे यहां छोड़ दें। इसे localStorage का उपयोग करके हल किया गया।

मैं एप्लिकेशन की run विधि का एक भाग के रूप में इस निर्धारित किया है

$rootScope.$on('$stateChangeSuccess', function (event, toState) { 
    localStorage.setItem('__stateName', toState.name); 
}); 

अब, अपने ऐप के संरचना के आधार पर आप इस किसी ऐसे स्थान पर किसी और डाल विचार करना चाह सकते हैं, लेकिन मेरे मामले में मैं माता पिता AppController सभी आसपास था बाल नियंत्रक, इसलिए कोड का यह हिस्सा वहां गया।

var previousState = localStorage.getItem('__stateName'); 
previousState && $state.go(previousState) || $state.go(<SOME_OTHER_ROUTE>); 

असल में, जब उपयोगकर्ता ब्राउज़र ताज़ा हिट, AppController शुरुआत (बच्चे नियंत्रकों से पहले) से प्रारंभ हो, राज्य संक्रमण तुरंत अगर वहाँ एक था फायरिंग। अन्यथा, आप अपने किसी अन्य राज्य में जाएंगे।