I'm currently developing a mobile app using Ionic, and I've encountered an unusual issue. Whenever I refresh the page (pressing F5) from a specific route like "/tabs/connected/channel/edit", I always get redirected to "/tabs/home" after the state resolving process.
Just to clarify, the resolve phase is executed correctly without any rejections. However, upon promise resolution, I consistently end up being redirected to /tabs/home.
Below is my configuration block:
.config(function($stateProvider, $urlRouterProvider) {
var userResolve = function(user, $q, $auth) {
if (!$auth.isAuthenticated()) {
return $q.resolve();
}
if (user.loaded) {
return $q.resolve();
}
return user.blockingRefresh();
};
// Implementation of states using AngularUI Router for setting up routing in the app
// More details can be found here: https://github.com/angular-ui/ui-router
// Defining various states that the app can be in
// Each state's controller can be located in controllers.js
$stateProvider
// Setting up an abstract state for the tabs directive
.state('tabs', {
url: '/tabs',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tabs.home', {
url: '/home',
views: {
'home-tab': {
templateUrl: 'templates/home.html',
controller: ''
}
}
})
.state('tabs.account', {
url: '/account',
views: {
'account-tab': {
templateUrl: 'templates/account/account.html',
controller: 'AccountController'
}
},
resolve: {
userData: userResolve
}
})
.state('tabs.login', {
url: '/account/login',
views: {
'account-tab': {
templateUrl: 'templates/account/login.html',
controller: 'AccountController'
}
}
})
.state('tabs.register', {
url: '/account/register',
views: {
'account-tab': {
templateUrl: 'templates/account/register.html',
controller: 'RegisterController'
}
}
})
.state('tabs.connected', {
url: '/connected',
abstract: true,
views: {
'account-tab': {
templateUrl: "templates/connected.html"
}
},
resolve: {
userData: userResolve
}
})
.state('tabs.connected.channel-create', {
url: '/channel/create',
templateUrl: 'templates/channel/create.html',
controller: 'CreateChannelController'
})
.state('tabs.connected.channel-edit', {
url: '/channel/edit',
templateUrl: 'templates/channel/edit.html',
controller: 'EditChannelController'
});
// Default fallback if none of the above states are matched
$urlRouterProvider.otherwise('/tabs/account');
})
Here is tabs.html:
<ion-tabs class="tabs-assertive tabs-icon-top">
<ion-tab title="Home" ui-sref="tabs.home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Account" ui-sref="tabs.account" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
<ion-nav-view name="account-tab"></ion-nav-view>
</ion-tab>
I want to emphasize that I never use $state.go('/tabs/home') anywhere in my code. I am certain of that fact. My objective is to remain on the same route even when reloading the app. This issue seems selective as it doesn't occur on some states, despite their similarities to the problematic ones.
Thank you!