CODEWITHSUNDEEP
angularjsionic-frameworkfirebaseangularfirefirebase-authentication
jick
jick

Reputation: 168

$ionicModal forces route change

I'm having a bit of trouble with my $ionicModals. 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.

Upvotes: 0

Views: 168

Answers (2)

jick
jick

Reputation: 168

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?

Upvotes: 1

Aaron Saunders
Aaron Saunders

Reputation: 33345

i would wrap the function in a try catch block, there is some additional error checking you could do to provide more insight.

Also you are assuming that the $ionicModal.fromTemplateUrl is resolved immediately since you are making a call to $scope.modal.show() without insuring you actually have a modal.

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

   return modal.show();

}, function(_error) {
   console.log(_error)
});

Upvotes: 1

Related Questions