Angular UI Modal : ModalInstance is getting undefined

Question

I am using a uiModal to create a pop up. I have the following methods:

createPopUp - which creates the modalInstance, something like this

$scope.createFileUploadPopUp = function() {
                $scope.modalInstance = $modal
                                    .open({
                                        scope : $scope,
                                        animation : true,
                                        templateUrl : 'xyz.html',
                                        backdrop : 'static',
                                        keyboard : false
                    });                 

                };

closeModal - which closes the modal.

$scope.closeModal = function() {
                    $scope.modalInstance.close();
                };

I am calling the create pop up from a html page, it's getting invoked properly. The close button also works when i call closeModal method from html.

But when i call the closeModal method from another method in the same controller, i am getting an exception that the modalInstance is undefined.

Method call(the calling method is defined with $rootScope) : $scope.closeModal();

Debugging didn't help since the control is going to closeModal, but the modalInstance value is undefined. Any help is appreciated.

Updated the question with full code and method call. Thanks! — vthallam
are you trying to close the modal before it is even created? — Pratik Bhat

vthallam vthallam · Accepted Answer · 2016-03-16T04:17:58

I got this working finally! The reason it was showing undefined was, there was another modal object with the same name modalInstance in a controller which i am importing. Renaming to avoid duplicates have solved the issue.

Angular UI Modal : ModalInstance is getting undefined

1 Answers