Strange Problem with $ionicModal - Execution out of Order


#1

Hello All,

Having a strange problem with $ionicModal.

I first declared my modal in app.run() as follows.

$ionicModal.fromTemplateUrl('templates/busyModal.html', { id: '1', animation: 'slide-in-up', backdropClickToClose: false, showBackdrop: true, hardwareBackButtonClose: false, focusFirstInput: true, reload: true, notify: true, inherit: false }).then(function (modal) { console.log('Defined the Ionic Modal'); $rootScope.busyModal = modal; }).finally(function () { $rootScope.$broadcast('loading:hide'); });
  $rootScope.$on('busyModal:showModal', function () {
      console.log('inside show modal');
      if(!$rootScope.busyModal) {
        console.log('Busy modal is not yet defined');
      }else {
        console.log('Attempting to show Modal');
        $rootScope.busyModal.show();
      }
  });

  $rootScope.$on('busyModal:hideModal', function () {
    if(!$rootScope.busyModal){
       console.log('Cannot hide busy modal it hasn\'t been defined yet');
    }else {
       console.log('Hiding busy modal');
       $rootScope.busyModal.hide();
    }
  });

  $rootScope.$on('$destroy', function () {
    $rootScope.busyModal.remove();
  });

Called this from my start up screen controller as follows.

$scope.checkSkip = function(){ User.load(); // Factory used to save user Data. if (typeof User.emailAddress == 'undefined' || !User.emailAddress || typeof User.password == 'undefined' || !User.password || typeof User.userToken == 'undefined' || !User.userToken ){ // choose to sign up or ask user to login using existing credentials. return; }
// Else verify token 
// First show Modal to hide which view User ends up on.
    console.log('Requesting to show modal');
    $rootScope.$broadcast('busyModal:showModal');

User.verifyToken().then(
	// Block of code to verify login & check which page user lands on.
        // some more debug messages here using console.log();
)

}

When I run this the $ionicModal does not show the browser console in fact shows following

Requesting to show modal
Busy modal is not yet defined
Inside verify token
Inside ping server
checking token against server /verify

snip

Defined the Ionic Modal

So apparently I felt the promise for $ionicModal within app.run() takes longer to resolve than when the controller requests the modal window. So I moved the code to the same controller.

^ Same code as above. Do not want to paste it again. No errors in execution but again the same console output as above

Requesting to show modal
Busy modal is not yet defined
Inside verify token
Inside ping server
checking token against server /verify

snip

Defined the Ionic Modal

Any idea what I am doing wrong? This same method $rootScope.$on() works in another app, that I am working on, but in this one it will not work even when the modal is defined in the same $scope and called directly as $scope.showBusyModal(); without doing a without $broadcast