jick jick - 3 months ago 25
AngularJS Question

$ionicModal forces route change

I'm having a bit of trouble with my

$ionicModal
s. Everytime I open a modal, it forces an empty route causing
$urlRouterProvider.otherwise('/login');
to occur. If I take
$urlRouterProvider
out of my config, it works fine -- however my app just starts up to a blank screen. Does anyone know whats causing this issue? I'm calling the Ionic modals pretty standardly inside my
FeedController
:

$ionicModal.fromTemplateUrl('templates/views/view.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});

$scope.modal.show().then(function() {
// Blah
});


My config looks like this:

$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginController',
resolve: {
'currentAuth': function(Auth) {
return Auth.checkAuth().$waitForAuth();
},
'clearCache': function($ionicHistory) {
return $ionicHistory.clearCache();
}
}
})
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/main.html',
controller: 'SideMenuController',
resolve: {
'currentAuth': function(Auth) {
return Auth.checkAuth().$waitForAuth();
}
}
})
.state('app.feed', {
url: '/feed',
views: {
'viewContent': {
templateUrl: 'templates/views/feed.html',
controller: 'FeedController',
resolve: {
'currentAuth': function(Auth) {
return Auth.checkAuth().$requireAuth();
},
'clearCache': function($ionicHistory) {
return $ionicHistory.clearCache();
}
}
}
});

$urlRouterProvider.otherwise('/login');
});


I also should mention I'm resolving to check for AngularFire authentication before the state loads. Im listening on
$rootScope
to see if there's a
$stateChangeError
, then this would redirect the user to the login screen, but this doesn't seem to be the issue, hence removing the
$urlRouterProvider
line:

$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
if (error === 'AUTH_REQUIRED') {
$state.go('login');
}
});


I'm also clearing the cache on the
FeedController
and
LoginController
resolve. Has anyone experienced this issue with $ionicModals? Please let me know if you can help. Thank you kindly.

Answer

Just wanted to post here for anyone else experiencing this. I figured out the solution. It was caused by a hash, href="#" on the <a> element causing the route change. I guess $urlRouterProvider sees a blank route in this instance?

Comments