Angular ui router persisting $stateParams

Question

I've defined a params object on my parent state and want to assign values to the properties, on child states, and have that value persist to other states. When I navigate to child states I see the $stateParams.property but after assigning a value to $stateParams.property the value is not persisting to the next sibling state.

  .state({
    name: 'parent',
    url: '/parent',
    templateUrl: 'app/parent.html',
    controller: 'parentController',
    controllerAs: 'vm',
    resolve: {
      user: function(){
        return { user: {} };
      },
      //regionsCountriesInfo: ['$stateParams', function($stateParams){
      //  return $stateParams.regionsCountriesInfo;
      //}],
      // edit
      regionsCountriesInfo: function(){
        return { value: [] };
      }
    },
    children: [
      {
        name: 'region',
        url: '/region',
        templateUrl: 'app/region.html',
        controller: 'regionController',
        controllerAs: 'vm',
        ncyBreadcrumb: {
          label: 'Regions',
          parent: 'parent'
        },
        resolve: {
          user: function(user) {
            return user;
          },
          // edit
          regionsCountriesInfo: function(regionsCountriesInfo) {
            return regionsCountriesInfo;
          }
        }
      },
      {
        name: 'user',
        url: '/user',
        templateUrl: 'app/user.html',
        controller: 'userController',
        controllerAs: 'vm',
        ncyBreadcrumb: {
          label: 'Users',
          parent: 'parent'
        },
        resolve: {
           user: function(user) {
            return user;
          },
          // edit
          regionsCountriesInfo: function(regionsCountriesInfo) {
            return regionsCountriesInfo;
          }
        }
      },

// regionController
regionController.$inject = [
'$scope',
'$translate',
'$uibModal',
'$state',
'$stateParams',
'$rootScope',
'regionsCountriesInfo'
];

function regionController($scope, $translate, $uibModal, $state, $stateParams, $rootScope, regionsCountriesInfo) {
  ...
  vm.selectedRegions =  [];
  ... 
  vm.selectedRegions.push(region)
  console.log('regionController regionsCountriesInfo');
  console.log(regionsCountriesInfo);
  regionsCountriesInfo = vm.selectedRegions;
  console.log('regionController regionsCountriesInfo');
  console.log(regionsCountriesInfo);

// regionController console output
regionController regionsCountriesInfo
undefined
regionController regionsCountriesInfo
[Object]

// userController
userController.$inject = [
'$translate',
'$uibModal',
'$state',
'$scope',
'$timeout',
'$stateParams',
'$rootScope',
'regionsCountriesInfo'
];
function userController($translate, $uibModal, $state, $scope, $timeout, $stateParams, $rootScope, regionsCountriesInfo) {
  ...
  console.log('userController regionsCountriesInfo');
  console.log(regionsCountriesInfo);

// userController console output
userController regionsCountriesInfo
undefined

Why is $stateParams.regionsCountriesInfo empty in the user state when I assigned a value to it in the region sibling state?

Answer 1

I guess the problem was that I needed to use a regular resolve object, as the value I needed to persist wasn't in $stateParams to begin with i.e., it was defined in the regionController. See edit above.

Answer 2

i think each child create isolated varibles , did you try to repass it to child in routing ?

Answer 3

You need to use resolve in the parent state as $stateparams only contains params registered with that state.

state({
    name: 'parent',
    url: '/parent',
    templateUrl: 'app/parent.html',
    controller: 'parentController',
    controllerAs: 'vm',
    resolve: {
        regionsCountriesInfo: ['$stateParams', function($stateParams){
            return $stateParams.regionsCountriesInfo;
        }]
    }