#180 DIV.modal not removed from DOM

[Anonymous]

Originally created by: dlmiles

FWIW using Bootstrap 3.3.7.

When you repeatedly open/close the same modal, I get multiple copies of the DIV.modal element in the DOM. This is a problem as I also sets the attribute id="unique-id" value so it makes the result invalid document with duplicate IDs.

The DIV.modal-backdrop is added and removed from DOM as expected.
I would expect the DIV.modal to be the same.

Now if I have 2 or more modals and open/close alternate modals, the element of the DIV.modal for the previous one is removed. I see the $destroy events fire etc as expected.

I have no actual problem with the extra DIV.modal being present in the DOM (and hidden after first use) the issue is the duplicates that occur are unwanted. So it would be ok to reuse the same DIV if that helps somehow, but to hide the old one, and simply append a new one without removing the old one is unwanted.

I would guess that somewhere this library should not only call modalScope.$destroy() but also modalController.$destroy() ?

[Anonymous]

Originally posted by: gatspy

I have a similar problem

[Anonymous]

Originally posted by: ofirgeller

when the modal is closed by clicking outside the modal the cleanUpClose function is not called. so we do not have an option to clean things up.

I think the first problem has to do with bootstrap hiding the modal and I don't have an easy fix except not using bootstrap.

[Anonymous]

Originally posted by: dlmiles

so can a reference to the previous modal be retained by the libary, so that if you try to setup another one we automatically cleanup the old one ?

[Anonymous]

Originally posted by: mpetrovic

This occurs with jQuery.ui Dialog as well. Any method of closing the modal that doesn't go through the close function on the controller (X in the corner, pressing Escape), leaves the dialog around and, presumably, objects in memory.

I'm getting around it by adding a close handler to the dialog that deletes the element, but it's obviously not ideal. Perhaps exposing the close() function to the showModal promise, so event handlers can use it?

[Anonymous]

Originally posted by: husanu

As workaround

hidden.bs.modal (getbootstrap.com) - This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

ModalService.showModal({...}).then(function (modal) {
    modal.element.modal();

    /// this event is fired by bootstrap
    modal.element.on('hidden.bs.modal', function (e) {
        modal.element.remove();
    });
})