Odd issue with $stage.go, $stateChangeStart, and tab navigation

I’m trying to build a login modal prompt that is activated whenever I switch to a specific tab. I followed this tutorial and everything is working as intended, besides one weird issue when closing the login modal.

The modal is activated when I click on the last tab on my app. When closing the modal (not actually logging in), my intention is to return to the home tab that has a list of events and a search box. So I added $state.go("tab.events") to the modal close function. However, if I click on a tab and prompt the login modal while I am already on the home tab, then when I close the modal it navigates back to the home tab but the home tab is completely empty and the last tab has the active state. Then if I switch tabs and come back to the home tab it is populated again with the original list and search bar. This only happens when I navigate from the home tab. So if I navigate from another tab on the app and close the modal it successfully navigates back to the home page with the original data.

It sounds pretty confusing, so here are some images of what I am talking about that might help.

Home tab after initial app load (I click on the user icon tab to prompt the login modal):

Login modal successfully pops up after clicking the user icon tab:

After clicking the close icon on the modal, I get this - no data, no search bar, no active state on tab, but it changes the url and title as expected. But if was on one of the other tabs before clicking the user icon tab, closing the modal will take me back to the home tab with no issues:

Has anyone else experienced anything like this? Any help would be much appreciated.

I solved it by just doing an explicit check on each of my controllers and tabs. Each tab has an ng-click that checks the logged in state. Not the prettiest solution since I have duplicate code in each tab controller, but it works.

  $scope.isLoggedIn = function() {
    console.log($localStorage.currentUser);
    if (typeof $localStorage.currentUser === 'undefined') {
      LoginModalService
        .init('templates/modal-login.html', $scope, 'tab.activity')
        .then(function(scope) {
          scope.modal.show();
        });
    } else {
      $state.go('tab.activity');
    }
  }

My login modal service looks like this:

.service('LoginModalService', function(
  $ionicModal,
  $rootScope,
  $state) {

  return {
    init: function(templateUrl, $scope, redirectState) {
      var promise;
      $scope = $scope || $rootScope.$new();

      promise = $ionicModal.fromTemplateUrl(templateUrl, {
        scope: $scope,
        animation: 'slide-in-up'
      }).then(function(modal) {
        $scope.modal = modal;
        return $scope;
      });

      $scope.openModal = function() {
        $scope.modal.show();
      };
      $scope.closeModal = function() {
        $scope.modal.hide();
        $state.go('tab.events');
      };
      $scope.$on('$destroy', function() {
        $scope.modal.remove();
      });         
      return promise;
    },
  }
})

Hope this helps others. Any suggestions for improvements would be greatly appreciated.

1 Like

I also met this kind of problem and asked a question, but finally I got the solution myself, you can see my reply in that post.