Why is my modal dialog leaving shadow behind?

[miliu99]

I followed the sample code and it is kind of working, except that the then() function doesn't get called when I dismiss the dialog. I'm not sure if this is related to the fact I'm also using AngularStrap in the project.

[recyclethis]

I've had the same problem when trying to close the modal using the close function injected into my modal controller. My workaround has been to push the current modal into the $rootScope in the .then function, and close it in my controller by grabbing the modal from the rootScope. Smells, but it works.

            modalService.showModal({
                templateUrl: '../../content/app/map/export/export-map-form.html',
                controller: 'ExportMapController',
            }).then(function (modal) {
                $rootScope.currentModal = modal;
                modal.element.modal();
            });

Then when I want to close the modal, rather than calling close I use
scope.rootScope.currentModal.element.modal('hide');

[Jakobovski]

You can also use jQuery. Just add an id tag to the modal and then $('#modal-idl').modal('hide');

[rossrossp]

I also have this issue, but only when using $http and closing after the request has finished:

$http({ method : "POST", url : "/api/bla", data: { } }).then(function mySuccess(response) { if(response.data.error) { $scope.errorMessage = response.data.error; } else { close(true, 500); } }, function myError(response) { //bla });

Any ideas?

[dwmkerr]

The easiest way (as of [0.12]9https://github.com/dwmkerr/angular-modal-service/releases/tag/v0.12.0) is to do this with a preClose hook:

ModalService.showModal({
  templateUrl: "some/bootstrap-template.html",
  controller: "SomeController",
  preClose: (modal) => { modal.element.modal('hide'); }
}).then(function(modal) {
  // etc
});