CODEWITHSUNDEEP
angularjsionic-framework
Blaze
Blaze

Reputation: 2329

IonicModal: $scope.ionicModal.show() not working after calling $scope.ionicModal.remove()

I have created an ionic modal. When I click this for the first time

<label class="list card">
<textarea ng-click="newPost(1); content = '' " placeholder="Write here"></textarea></label>

This is the new post function

// Open our new task modal
  $scope.newPost = function(index) {
       if (index == 1){
        $scope.postModal.show()
       }else {$scope.selectModal.show();}
     // $scope.postModal.show();

  };
        </label>

It pops up the ionic modal, then in other to hide and destroy the ionic modal, I click this 

<button style="border: 3px solid red; border-radius:5px; color: #ff6000" class="button button-clear button-positive" ng-click="closeNewPost(1);content= '' ">Clear</button>

This is the hide and remove function

// Close the new task modal
  $scope.closeNewPost = function(index) {
       if (index == 1) {
    $scope.postModal.hide();
      $scope.postModal.remove();
      } else {
          $scope.selectModal.hide();
       }
      //$scope.postModal.hide();
      // $scope.postModal.hide();
  };

Now, my challenge is that on clicking this the second time, it never pops up the ionic modal again

<label class="list card">
<textarea ng-click="newPost(1); content = '' " placeholder="Write here"></textarea></label>

You can take a look at ionic Modal documentation

http://learn.ionicframework.com/formulas/making-modals/

Please what is wrong.

Upvotes: 1

Views: 1595

Answers (1)

JimR
JimR

Reputation: 2225

It's not showing again because you're removing the modal. The docs on ionicmodal explain that running remove() on a modal will:

Remove this modal instance from the DOM and clean up.

If you just want to hide/show the same modal, use hide and show. If you want to remove the modal from the dom, use remove but then be sure to recreate the modal when you want to show it again.

Making modals shows how to create a modal:

$ionicModal.fromTemplateUrl('contact-modal.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
   $scope.modal = modal
})

If you want to call this code from an ng-click just place it within a method and attach it to your controller's scope:

$scope.createModal = function() {
    $ionicModal.fromTemplateUrl('contact-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
       $scope.modal = modal
    })  
}

Upvotes: 2

Related Questions