Zuverlässig feststellen, ob das angulare ui Modal offen oder geschlossen ist (ein- oder ausgeblendet)

Question

Ich suche nach einer Methode, um zuverlässig zu bestimmen, ob das angulare ui modale Fenster gerade offen oder geschlossen ist.

Das Standard Bootstrap JS bietet die 'gezeigten'/'versteckten' Ereignisse dafür.

Im Moment kann ich nur die modal.close() - Funktion umbrechen und eine Variable auf 'closed' setzen. Außerdem entferne ich das modale Objekt und instanziiere es erneut, wenn es wieder geöffnet wird. Dies deckt jedoch nicht die Fälle ab, in denen der Benutzer auf den Hintergrund klickt oder die ESC-Taste drückt, um das Modal zu schließen.

Gibt es auch einen sauberen Weg, diese Fälle abzudecken?

Answer 1

TLDR: Modul Fügen Sie ui.bootstrap.modal in Ihrer Anwendung, injiziert Fabrik $modalStack in Ihrem Controller/service/was auch immer und dann !!$modalStack.getTop() genug ist zu wissen, ob ein modale auf nicht existiert.

Detaillierte Lösung: ich das gleiche Problem konfrontiert, und ich kam mit den folgenden Arbeiten bis um:

Es gibt eine Fabrik namens $modalStack, die in ui-Bootstrap-lib definiert ist, die die Modalverben behandelt. Derselbe Dienst hat auch eine Methode namens getTop(), die das oberste Modal in dom zurückgibt. (Und eine Methode dismissAll(), um alle Modalitäten zu schließen). Also habe ich ein kleines Modul mit einigen kleinen Funktionen geschrieben.

var utilsModule = angular.module('utilsModule', ['ui.bootstrap.modal']); 

utilsModule.factory('modalUtils', [ 
    '$modalStack', 
    function ($modalStack) { 
    return { 
     modalsExist: function() { 
     return !!$modalStack.getTop(); 
     }, 
     closeAllModals: function() { 
     $modalStack.dismissAll(); 
     } 
    }; 
    } 
]);