States are overwriting each other using tabs and child states


#1

Okay so the states for the most part almost work. The problem I am having is that when I open the app I have 4 tabs:

Locations
– Venue Details Page
Rewards
Messages
Account

Now I can navigate to all states fine but after traversing through the pages the states start getting all messed up. I will click on Account and it will take me to a Venue Details Page. Or sometimes when I start on Locations and go to Account and then back to Locations the title stays “Account” instead of the title for the Locations page. I can’t figure out what is happening. I have tried disabling cache within the states as well as global and nothing changes. I believe my states are set up correctly but let me know:

States:

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider, $locationProvider, $compileProvider) {
            $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|tel|local|data|chrome-extension|fb|twitter|instagram|qrbarcode):/);
            $locationProvider.html5Mode(true);
            $ionicConfigProvider.tabs.position('bottom');
            $ionicConfigProvider.views.maxCache(0);

$stateProvider
    .state('scaffold', {
        abstract        : true, 
        cache           : false,
        templateUrl       : '/themes/default/ng/scaffold.html',
        controller      : "AppCtrl"
    })
    .state("tabs", {
        url             : "/user",
        parent          : "scaffold",
        cache           : false,
        abstract        : true,
        templateUrl     : "/themes/default/ng/tabs.html"
    })
    .state("home", {
        url         : "/home",
        parent      : "tabs",
        cache           : false,
        views       : {
            "venue-list" : {
                templateUrl : "/themes/default/ng/venue-list.html"
            }
        }      
    })
    .state("home.venue", {
        url             : "/venue/:venueId",
        cache           : false,
        views           : {
        "venue-list@tabs" : {
                templateUrl     : "/themes/default/ng/venue.html",
                controller      : "VenueCtl",
            }    
        },
        resolve         : {
            venueData       : function($stateParams, venueFactory) {
                return venueFactory.getVenue($stateParams.venueId).then(function(venue){
                    return venue;
                });
            }
        }
    })
    .state("home.rewards", {
        url             : "/rewards",
        cache           : false,
        views           : {
            "rewards@tabs" : {
                templateUrl     : "/themes/default/ng/rewards.html",
                controller      : "RewardsCtl",
            }
        },
        resolve : {
            rewardData : function($state, $stateParams,RefreshService,$window,$q){
                return RefreshService.updateRewards().then(function(){
                    return RefreshService.returnRewards().then(function(rewards){
                        return rewards;
                    },function(err){
                        $state.go("home");
                    });
                },function(error){
                    $state.go("home");
                });
            }
        }
    })
    .state("home.account", {
        url             : "/account",
        cache           : false,
        views           : {
            "account@tabs" : {
                templateUrl     : "/themes/default/ng/account.html",
                controller      : "AccountCtl",
            }
        },
        resolve         : {
            userAuth : function($state,userFactory){
                return userFactory.isAuthenticated().then(function(success){
                    return true;
                },function(error){
                    $state.go("home");
                });
            },
            drinksData : function(RefreshService) {
                return RefreshService.getDrinks().then(function(drinks){
                    return drinks;
                }, function(error){
                    return 0;
                });
            }
        }
    })
    .state("home.messages", {
        url             : "/messages",
        cache           : false,
        views           : {
            "messages@tabs" : {
                templateUrl     : "/themes/default/ng/messages.html",
                controller      : "MessagesCtl"
            }
        },
        resolve         : {
            userAuth : function($state,userFactory){
                return userFactory.isAuthenticated().then(function(success){
                    return true;
                },function(error){
                    $state.go("home");
                });
    }
    }
})
[... and more states and then closed .config...]

Navbar HTML:

<ion-nav-bar class="showbar">
      <ion-nav-back-button class="button-icon ion-arrow-left-c" style="color:#fff">
        Back
      </ion-nav-back-button>
      <ion-nav-title> 
        CityZen
      </ion-nav-title>
      <ion-nav-buttons side="right" >
            <button class="button button-light button-outline" ng-click="openLoginModal()" ng-show="employee_in" >
                Employee Login
            </button>
            <button class="button button-light button-outline" ng-click="openLoginModal()" ng-show="!user_in">
                Login / Register
            </button>
            <button class="button button-light button-outline" ng-click="openPromoModal()" ng-show="user_in && !not_user">
                Promo Code?
            </button>
      </ion-nav-buttons>
  </ion-nav-bar>

  <ion-nav-view animation="slide-top-bottom"></ion-nav-view>

Tab HTML:

<ion-tabs class="tabs-positive tabs-bottom">

      <ion-tab title="Locations" ui-sref="home">
            <ion-nav-view name="venue-list"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Rewards"  badge="redeemableRewards" badge-style="badge-energized"  ui-sref="home.rewards" ng-if="user_in">
          <ion-nav-view name="rewards"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Messages"  badge-style="badge-energized"  ui-sref="home.messages" ng-if="user_in">
          <ion-nav-view name="messages"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Account"  ui-sref="home.account" ng-if="user_in">
          <ion-nav-view name="account"></ion-nav-view>
      </ion-tab>
  </ion-tabs>

The Venue Details page is accessed by:

ui-sref="home.venue({venueId: value.id})"

Please let me know if anything is not set up correct.

Thanks,

Austin


#2

If you are using the latest Ionic (1.3.1), try 1.3.0 instead. 1.3.1 changed how tabs function, and I haven’t yet been able to decipher the guidelines on what needs to change in order to accommodate the Ionic changes that are mentioned here:

I’d recommend trying 1.3.0 first, and if your code works, then you’re in the same boat as me trying to figure out how to get tabs working again in 1.3.1. Good luck.


#3

Hey revie,

Yeah I saw someone else mention that in another post and I tried that and now the Tab titles aren’t visible and the same issue still happens unfortunately.

I have tried 1.3.1 and 1.3.0.