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

ionic-v1
1

I am using the suggested technique in the tutorial to create a modal in my controller that works as long as I do not navigate away from the view using that controller. If I navigate away and return to it (re-triggering the Controller), then the modal no longer works. The console error I get is:

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

I found only 1 hit by Googling this specific ionic framework error (and I am already using the same implementation suggested in that solution).

I see there is an initialize() method for the ionicModal controller. Is that how a new instance is created? What is the way to address this Ionic error message?

2 Likes
3

Making a bit of progress. I did find in the ionic source code where there is a check for self.scope.$$destroyed === true. When true, then the error is thrown.

By manually setting the value to false right before calling .show(), I could get around the error and have the modal reappear–but the data binding was broken and the modal wouldn’t work (and this feels like a terrible workaround).

Changed gears and check for a self.scope.$$destroyed === true, and recreate a new modal instance (but I don’t pass in a scope. I let ionic take over with a child of $rootScope as default according to their docs). The original error does not occur, and the modal appears when I switch views and come back.

Data binding in my modal is still broken–but am thankfully past the original issue without manually overriding the modal’s scope values.

1 Like
4

Could you post the code for your controller?

You might have something like this in it:

$scope.$on('$destroy', function() {
    $scope.modal.remove();
});
5

I am having exactly the same problem as @newionicfan. And yes @gundlund , in my controller I have:

 $scope.$on('$destroy', function () {
       $scope.modal.remove();
 });

How can I rebuild the modal when the controller gets fired again i.e. the user navigates back to the form where the modal is used?

1 Like
6

Having the same issue.

7

Anything new here?

I have the same issue. I have two iphone 6 to test. On the one the issue appears and on the other the issue doesnt appear.

8

I am experiencing the same issue here.

9

I solved doint something like this:

function LoadPopover(){
			$ionicPopover.fromTemplateUrl('views/delivery/searchByLocation.html', {
			    scope: $scope
			}).then(function(popover) {
			    $scope.popoverLocation = popover;
			    $scope.popoverLocation.show();
			});
		}

		$scope.openPopover = function($event) {
			if ($scope.popoverLocation !== undefined) {
				$scope.popoverLocation.show($event);
			}
			else{
				LoadPopover();
			}

		};

		$scope.closePopover = function() {
		    $scope.popoverLocation.hide();
		};

		$scope.$on('$destroy', function() {
			$scope.popoverLocation.remove();
		});