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