Error Modal : Can't reopen after changing view

ionic-v1
1

Hello everybody,

I come to you to fix a problem with ionic modal.

I have two views one for the home page and another for a scanner and showing a modal.

  1. I start in my home page, when i go to the ScannerPage everything work good i can scan and the modal show me the result of the scan .

  2. I back to my home page

  3. And when i return to my ScannerPage to make a another scan the modal.show() make me this error :

Cannot call modal.show() after remove(). Please create a new modal instance

Modal call in my ScannerPage Controller :

  $ionicModal.fromTemplateUrl('my-modal.html', {
      scope: $scope,
      animation: 'fade-in',
      backdropClickToClose: false
  }).then(function(modalMyResult) {
      $scope.modalResult = modalMyResult;
  });

 $scope.$on('$destroy', function() {
  console.log("destroy");
  $scope.modalResult.remove();
  $scope.modalResult == null;
  });  
  
$scope.closeResultModal = function() {
$scope.modalResult.hide();
 };
 $scope.openResultModal = function() {
 $scope.modalResult.show();
 };

my-modal in my ScannerPage.html :

<script id ="my-modal.html" type="text/ng-template">
<ion-modal-view style="width: 70%; height: 50%; top: 35%; left: 15%; right: 15%; bottom: 15%; min-height: 0;">
  <ion-header-bar class="bar bar-header bar-header-modal-result"> 
      <h1 class="title" style="color: white;">R&Eacute;SULTAT</h1>
      <div class="button button-clear" ng-click="closeResultModal()"><span class="icon ion-close"></span></div>
    </ion-header-bar>
<ion-content class="has-header easyscan-list" padding="true">
<div class="list-group">
  <a class="list-group-item list-group-item-{{$index + 1}}"  ng-repeat="item in items" ng-click="selectItem(item)">
    <span class="item-name">{{item.name}}</span>
  </a>
 </div>
 </ion-content>
 </ion-modal-view>
 </script>

function to call my modal in my controller :

    function sucessScan(value)
{  
  loadFromDatabase(value);
  $scope.openResultModal(); 
}

I hope you can help me and if you have question ask me.

Thanks all,
Jeoffrey.

2

I don’t know exactly what´s happening, but maybe you can try this:

1.- Remove the event “destroy”
$scope.$on(’$destroy’, function() {
console.log(“destroy”);
$scope.modalResult.remove();
$scope.modalResult == null;
});

2.- Assign modalMyResult only if $scope.modalResult is undefined

if(!$scope.modalResult)
{
$ionicModal.fromTemplateUrl(‘my-modal.html’, {
scope: $scope,
animation: ‘fade-in’,
backdropClickToClose: false
}).then(function(modalMyResult) {
$scope.modalResult = modalMyResult;
});
}