States are overwriting each other using tabs and child states

@finetheagency wrote:

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

Posts: 3

Participants: 2

Read full topic