$stateParams is not refreshing. Wasted a lot of hours. Help needed

ionic-v1
1

Hello guys!
I’m developing my first application. It have worked really good, but now I’m stuck with an issue related to $stateParams.

I’m developing an app which requires login and logout. And have a url in this format:
’#/tab/profile/{{userId}}’

I have a tab to show the user profile. It should read the ID from the url, and render this user.

If I login with an user, the profile is rendered correctly. But when I log out and then log in with other user, It still shows the first user profile. The $stateProvider variable, it still have the previous value.

I recorded this short video to explain my problem.

And below is my source code.

This is really driving me crazy. What should I do? Thanks a lot!

$stateProvider   
  // setup an abstract state for the tabs directive
  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
  .state('tab.profile', {
    url: '/profile/:userIdInUrl',
    views: {
      'tab-profile': {
        templateUrl: 'templates/tab-profile.html',
        controller: 'ProfileCtrl'
      }
    }
  })

This is the tabs code. As showed in the video, the value is correctly updated:

  <!-- Profile Tab -->
  <ion-tab title="Profile" icon-off="ion-ios-person-outline" icon-on="ion-person" href="#/tab/profile/{{userId}}">
    <ion-nav-view name="tab-profile"></ion-nav-view>
  </ion-tab>

And this is my ‘ProfileCtrl’ code:

.controller('ProfileCtrl', function($http, $scope, $stateParams) {
    console.log('$stateParams:');
    console.log($stateParams);
  });
2

What happens if you log in with the second user from the beginning? Does it show userIdInUrl = 2?

Its hard to tell what your app is doing because controller logic only runs once. I’m not sure how your entire app is designed, but to help debug create a button on the profile ctrl that logs the stateparams. This is better for debugging purposes because you can control when it runs.

1 Like
3

It’s probably due to Ionic view caching, have a look at the offical docs.

1 Like
4

Thanks for your replies. I finally managed to solve it.

I added this method:

  $scope.goToUserProfile = function(){
    $state.go('tab.profile', { userIdInUrl: AuthService.userId() });
  };

And changed my tabs code to this:

  <!-- Profile Tab -->
  <ion-tab title="Profile" icon-off="ion-ios-person-outline" icon-on="ion-person" ng-click="goToUserProfile()">
    <ion-nav-view name="tab-profile"></ion-nav-view>
  </ion-tab>

Have a nice week!

2 Likes
5

Brilliant!

I had exactly the same issue:

I referenced a URL in different places, with different stateParam values, but it was using the same stateParam value instead of the different values as I wanted. Changing “ui-sref” to “ng-click” fixed the issue.

(as gmarziou commented this is probably caused by Ionic’s view caching)

This forum is really worth its weight in gold!

(well, it’s weightless so that would still mean zero, but you get what I mean)

6

where do you put the goToUserProfile? which controller?

7

put it at the parent controller. the one that belongs to abstract view