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?

It's explained on ui-router guide Important $stateParams Gotcha — Stubbies
– Stubbies, Commented Jun 21, 2016 at 20:18

James · Accepted Answer · 2016-06-21 20:23:46Z

1

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;
        }]
    }

answered Jun 21, 2016 at 20:23

James

1,0982 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

neridaj Over a year ago

Still not working. In userController $stateParams.regionsCountriesInfo:undefined Does it matter that the value is assigned in the regionController rather than the parentController?

James Over a year ago

Did you look at the link Ervald posted? The documentation shows how to do this using resolve. You'll need to inject 'regionsCountriesInfo' into the child controller.

neridaj Over a year ago

I tried adding the param to resolve and injecting (see edits), with the same result 'undefined' for both child states. What am I missing?

abdoutelb · Accepted Answer · 2016-06-21 21:32:24Z

0

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

answered Jun 21, 2016 at 21:32

abdoutelb

1,0631 gold badge15 silver badges34 bronze badges

Comments

neridaj · Accepted Answer · 2016-06-21 21:50:06Z

0

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.

answered Jun 21, 2016 at 21:50

neridaj

2,2039 gold badges33 silver badges63 bronze badges

Collectives™ on Stack Overflow

Angular ui router persisting $stateParams

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related