angularjs - refreshing child state view cause lose

Question

I have the following ui-router states.

.state('admin.userView', {
  abstract:true,
  url:'/user/:id/',
  templateUrl:'./views/user/view.html',
  controller:'userViewController'
})

.state('admin.userView.home', {
  url:'',
  templateUrl:'./views/user/home.html',
  controller:'userHomeController'
})

I have fetched user details using http resource in userViewController to $scope.users. When i move to the admin.userView.home state, I can access the $scope.users . But when i refresh page with child state, the value in the $scope.users is lost. How can i get the same.

Answer 1

Try moving that data into the resolve property of the admin.userView state declaration. Since you're using nested resolves here you can then inject that resolved data into the admin.userView.home state declaration. Here's an excerpt from the ui-router documentation.

$stateProvider.state('parent', {
      resolve:{
         resA:  function(){
            return {'value': 'A'};
         }
      },
      controller: function($scope, resA){
          $scope.resA = resA.value;
      }
   })
   .state('parent.child', {
      resolve:{
         resB: function(resA){
            return {'value': resA.value + 'B'};
         }
      },
      controller: function($scope, resA, resB){
          $scope.resA2 = resA.value;
          $scope.resB = resB.value;
      }

Source