Why cant I open a modal from the .run block?

1

I am trying to institute a login modal using routes and I am unable to get the modal to work in the .run block… the browser actually freezes and has to be force quite.

here is the run block

.run(function($ionicPlatform, $rootScope, $ionicModal) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
  
  $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
    var requireLogin = toState.data.requireLogin;

    if (requireLogin && typeof $rootScope.currentUser === 'undefined') {
      event.preventDefault();
      // get me a login modal!
      $ionicModal.fromTemplateUrl('login.html', {
        animation: 'slide-in-up'
      }).then(function(modal) {
        var modal = modal;
      });
      
      modal.show();
    }
  });
  
});

Any help would be appreciated this has killed a day of production so far.

2

A codepen would help so much :stuck_out_tongue:

3

You define your modal in the .then() callback. There you say var modal = modal;. The modal therefore is only accessible in that scope.

You can solve it either with moving the modal.show(); within the .then() callback or declare your modal var in the correct scope where it is accessible from where you use it. I would suggest the first, cause then you know for sure you can call the .show() function:

$rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
    var requireLogin = toState.data.requireLogin;

    if (requireLogin && typeof $rootScope.currentUser === 'undefined') {
        event.preventDefault();
        // get me a login modal!
        $ionicModal.fromTemplateUrl('login.html', {
            animation: 'slide-in-up'
        }).then(function(modal) {
            modal.show();
        });
    }
});
4

you have to call modal.show() on then callback
Codepen:
http://codepen.io/soutlink/pen/pvPMLJ