Modal hide doesn't work properly... it shows again

ionic-v1
1

Hi,

I’m using a modal in my app:

$ionicModal.fromTemplateUrl('templates/categories-list.html', function(modal) {
	    $scope.modal = modal;
	    $scope.modal_title = 'Categorias';

	    $scope.modalLeftButtons = [
	    { 
	    	type: 'button-clear',
	    	content: 'Cancel',
	    	tap: function(e) {
	    		$scope.modal.hide();
	    	}
	    }];

	  }, {
	    // Use our scope for the scope of the modal to keep it simple
	    scope: $scope,
	    // The animation we want to use for the modal entrance
	    animation: 'slide-in-up'
	  });

This is the view:

<view title="title" class="home">
    <header-bar type="bar-positive" title="modal_title" left-buttons="modalLeftButtons">
    </header-bar>
    <content has-header="true" padding="true" style="background-color: #233149">
        <div class="row">
          <div class="col"><img src="imgs/cat-default.png"></div>
          <div class="col"><img src="imgs/cat-default.png"></div>
          <div class="col"><img src="imgs/cat-default.png"></div>
          <div class="col"><img src="imgs/cat-default.png"></div>
          <div class="col"><img src="imgs/cat-default.png"></div>
        </div>
    </content>
</view>

When I click on “Cancel” the modal hides… but it shows again and ‘Cancel’ doesn’t work anymore…

Any idea ?

2

I saw this and was interested because of how you defined the modal header. I was doing mine differently, but yours is probably more “correct”.

I was doing this:

<header class="bar bar-header bar-positive">
    <h1 class="title">Choose Icon</h1>
    <div class="button button-clear" ng-click="closeModal()"><span class="icon ion-close"></span></div>
</header>

So, I replaced mine with yours and all worked perfectly on Chrome and Safari as a PhoneGap app. My modal didn’t have the double click at all.

Here’s my final controller code :

// Load the modal from the given template URL
$ionicModal.fromTemplateUrl('templates/selectIconModal.html', function($ionicModal) {
    $scope.modal = $ionicModal;
    $scope.modal_title = 'Select Icon';

    $scope.modalRightButtons = [
        {
            type: 'button-clear',
            content: 'Cancel',
            tap: function(e) {
                $scope.modal.hide();
            }
        }];
}, {
    // Use our scope for the scope of the modal to keep it simple
    scope: $scope,
    // The animation we want to use for the modal entrance
    animation: 'slide-in-up'
});
3

Perhaps it’s because you’re using a <view>? I don’t do that in my modal template. I do this:

<div class="modal">

    <header-bar type="bar-positive" title="modal_title" right-buttons="modalRightButtons">
    </header-bar>
    <content has-header="true">

    	<div>Some content here</div>

    </content>

</div>
1 Like
4

Thank you very much! this has been solved.

5

Was it the view vs. div that solved it?

6

I use <div> instead of <view>

7

Do you need to actually use ion-header-bar ? I guess that has changed?