AngularJS - Closing Modal

[Chris Ryhal]

I have a few modals I'm making use of. I can get them to open just fine with javascript, however; I have a few where the user will use a button click, in which calls a service. Upon the service being successful, I would like to close the modal automatically.

I have reviewed and attempted the documentation at http://angular-ui.github.io/bootstrap/ among others. I have tried using the $close() event, I have tried modalInstance.dismiss('cancel') and nothing seems to work. I just get an error saying its not defined.

Is there anything special to just closing a modal using ng-click within the JavaScript to closing the active modal?

I wouldn't keep asking these small things, have I not tried.

[Serhii Kulibaba]

Hello Chris,

1) You have to create local variable (in the same function, which opens this modal).
2) after method modal.open() set this variable:
premyModal = modal.scope.modalInstance;/pre
3) Use that variable anywhere you want to close modal:
premyModal.dismiss('cancel');/pre

[Mark Wong]

So do I have to create a new model and scope variable for closing the modal?

And by "modal.open()" do you mean "modal.show()"

Would you like to give me an example code as I don't understand the procedures

[Serhii Kulibaba]

Hi Mark,

1) please save modalInstance to the scope variable. e.g
pre// Function code
var modalOptions = {
animation: 'slide-in-up',
focusFirstInput: false,
backdropClickToClose: true,
hardwareBackButtonClose: true
};

Apperyio.get('Modals').loadModal("myModal").then(

Code: Select all

 function(modalInstance) { 

     modalInstance.open(modalOptions).then(function(modal) { 
         modal.scope.modal = modal; 
         modal.show(); 
     }); 
     $scope.modal = modalInstance; 
 }, 
 function(error){ 
     console.log(error); 
 });/pre 

2) Use code below for closing the Modal:
pre$scope.modal.hide();/pre

Note: varialbe "modal" has to be declared on the index page

[Mark Wong]

so if my understanding is correct, I have to create new model variable called modal

Declare the variable - modal at the pages that will open the modal and close the modal.

Use $scope.modal = modalInstance to save the variable.

And use $scope.modal.hide(); to close the modal whenever I need to.

But it returns errors of - $scope is not defined / hide is not defined

[Serhii Kulibaba]

You are right. Please provide us with a public app link (https://devcenter.appery.io/documenta...) and exact steps to reproduce this problem.

[Mark Wong]

http://appery.io/app/mobile-frame?src...

Click "Coffee" in "Our Selection" which will open the modal
Click "x" in the left top corner, error occurred

[Serhii Kulibaba]

Please define modal variable on the index page instead of itemsPage

[Mark Wong]

Defined, what do I do next

[Serhii Kulibaba]

You have to remove it's declaration from all pages instead of index