How to Initiate modal to open automatically?

tutorials
1

Hi Ionicorns,
I took a public codepen fiddle which opens the popup on click,

<button class="button" ng-click="modal.show()">Open Modal</button>

It works perfectly (check this pen http://codepen.io/praveen_jegan/pen/jlgJb). However I have been trying to open the modal window when the app is initiated i.e., Automatically?

I tried using ng-init=modal.open() of it parent, but it is not working, similar I tried as mentioned in this [post][1] I tried without it though I don’t understand it :frowning:

Please share your suggestions and if possible add some explanation to it?
[1]: How to show a modal while receive notifications?

2

@Calendee has a very good example of this. Basically you set up a value, and if the value returns true/false, open the modal.

1 Like
3

Thanks for the link. However I am new in angular js, so the code you referred need some time for me to understand.

Here is my attempt from your codepen,

.controller('MyCtrl', function($scope, $ionicModal, $timeout) {
    $ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
    $scope.modal = $ionicModal;
    }, {    
    scope: $scope,    
    animation: 'slide-in-up'
  });
  $scope.openModal = function() {    
    $scope.modal.show();
  };
  $scope.closeModal = function() {    
    $scope.modal.hide();
  };
  $timeout($scope.openModal, 10);
})

However this opens 2 modal windows? Any thoughts?

4

Gotcha!!! I just now found that I have initialized the Controller (MyCtrl) twice and therefore it was populating twice.
Sorry for the trouble @mhartington :slight_smile:

Thanks,
Praveen

1 Like