Modal won't close

ionic-v1
1

The modal opens fine, but will not close. Any ideas?

Controller:

$scope.rightButtons = [{
    type: 'button-icon icon ion-navicon',
    tap: function(e) {
        $scope.modal.show();
    }
}];

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

$scope.openModal = function() {
    $scope.modal.show();
};
  
$scope.closeModal = function() {
    $scope.modal.hide();
};

Main Template:

<ion-view title="'Stuff'" left-buttons="leftButtons" right-buttons="rightButtons">
  <ion-content has-header="true" has-tabs="true">
   <ion-list>
     </ion-item>
   </ion-list>
 </ion-content>
</ion-view>

Modal Template:

<div class="modal">
<header class="bar bar-header bar-positive">
    <h1 class="title">Modal</h1>
</header>
<ion-content has-header="true" padding="true">
    <button class="button button-positive" ng-click="closeModal()">Close</button>
</ion-content>
</div>
2

All seems okay. Can you put a console.log in that closeModal method and see if it is firing?

Can you post a demo?

3

I tried that and it doesn’t fire.

4

Try posting a CodePen sample. I don’t see anything wrong off the top of my head.

See this as a starting point:

5

Does the templates/modal.html need it’s own controller? I’m still getting nothing on ng-click.

6

No, it doesn’t need it’s own controller - but it can have one. The controller for the modal (unless a child controller is added) is the controller that instantiated the modal.

Did you see anything in the sample I linked that helps you? Can you post your own?

7

Here is part of it:

http://jsfiddle.net/robmacprac/Sb8E7/

Yours worked but all the html was in one file, where as I’m using several files.

8

Found the issue. I didn’t have scope: $scope, in the $ionicModal.fromTemplateUrl function. Seems to be working now.