mif
mif

Reputation: 13

How to show ionicModal on AngularJS app start?

How can I show ionicModal on app start? This code doesn't work

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal, $ionicPlatform) {
  $ionicPlatform.ready(function(){

    $scope.initApp = function() {
      // some init variables here
      if (someVariable){
        $scope.openModal();
      }
    }
    // init ionicModal here
    $scope.openModal = function() {
      $scope.modal.show();
    };
    $scope.initApp();
  });
});

but this work

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal, $ionicPlatform, $timeout) {
  $ionicPlatform.ready(function(){
    $scope.initApp = function() {
      // some init variables here
      if (someVariable){
        $timeout(function() {
          $scope.openModal();
        }, 1000);
      }
    }
    // init Modal here
    $scope.openModal = function() {
      $scope.modal.show();
    };
    $scope.initApp();
  });
});

I want open modal window on app start without delay. How can I do this? Thanks!

Edit code

Upvotes: 1

Views: 1263

Answers (2)

Farkhat Mikhalko
Farkhat Mikhalko

Reputation: 3645

As i understand application starts when device is ready.

So you can use the $ionicPlatform.ready method to attach callbacks for when the device is ready.

Trigger a callback once the device is ready, or immediately if the device is already ready. Source.

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal, $ionicPlatform) {
  $ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
  };
  $ionicPlatform.ready(function(){
    $scope.openModal();
  });
});

Upvotes: 1

Tzook Bar Noy
Tzook Bar Noy

Reputation: 11677

you should wait until device is ready, there are many methods for it, here is one I found:

$ionicPlatform.ready(function() {
     $scope.openModal();
});

Upvotes: 0

Related Questions