Come chiudere Angolare UI Modale ovunque

Sto usando la Angolare UI bootstrap finestra di dialogo modale e creare all’interno di un servizio:

myApp.factory('ModalService', ['$modal', function($modal) {
    return {
        trigger: function(template) {
            $modal.open({
                templateUrl: template,
                size: 'lg',
                controller: function($scope, $modalInstance) {
                    $scope.ok = function() {
                        $modalInstance.close($scope.selected.item);
                    };
                    $scope.cancel = function() {
                        $modalInstance.dismiss('cancel');
                    };
                }
            });
        },
        close: function() {
            //this should close all modal instances
        }
    };
}]);

Come posso chiudere tutti modale istanze quando si chiama ModalService.close() da un controller o del tutto?

  • Io apprezzo molto per questo post. Sono stato in grado di effettuare il refactoring del codice attraverso di essa. Unica differenza è che ho usato il metodo di risoluzione che era simile a quello dei documenti per ottenere I dati è stato l’aggiornamento.
InformationsquelleAutor DonJuwe | 2014-08-22



3 Replies
  1. 86

    Iniettare il $modalStack servizio e chiamare la funzione $modalStack.dismissAll(), vedere il codice GitHub per i dettagli:

    myApp.factory('ModalService', ['$modal', '$modalStack' function($modal, $modalStack) {
        return {
            trigger: function(template) {
                $modal.open({
                    templateUrl: template,
                    size: 'lg',
                    controller: function($scope, $modalInstance) {
                        $scope.ok = function() {
                            $modalInstance.close($scope.selected.item);
                        };
                        $scope.cancel = function() {
                            $modalInstance.dismiss('cancel');
                        };
                    }
                });
            },
            close: function(reason) {
                $modalStack.dismissAll(reason);
            }
        };
    }]);
    • Grazie, funziona come un fascino! Non so perché questo non è menzionato nei documenti github.com/angular-ui/bootstrap/tree/master/src/modal/docs
    • concordato, sarebbe utile, come quando si chiude un modale su $http successo.
    • Grazie mille, il loro aiuto è stato molto importante. +1 =)
    • Impressionante. Funziona anche con AngularUI, basta usare $uibModalStack.
    • aggiungere la virgola in argomenti della funzione
  2. 1

    Ho aggiunto la riga sottostante per evitare il pulsante indietro del browser di routing e chiusura del popup. Abbiamo bisogno di iniettare $modalStack in angolare controller.

    event.preventDefault();
                $modalStack.dismissAll('close');
  3. 0

    Questo è come l’ho preso a lavorare nel mio progetto senza l’utilizzo di qualsiasi fabbrica o altro codice.

      //hide any open $mdDialog modals
      angular.element('.modal-dialog').hide();
      //hide any open bootstrap modals
      angular.element('.inmodal').hide();
      //hide any sweet alert modals
      angular.element('.sweet-alert').hide();

    Ho una funzione di timeout che emette il logout come $rootScope.$emit('logout'); e l’ascoltatore nel mio servizio come segue:

    $rootScope.$on('logout', function () {
                        //hide any open $mdDialog modals
                        angular.element('.modal-dialog').hide();
                        //hide any open bootstrap modals
                        angular.element('.inmodal').hide();
                        //hide any sweet alert modals
                        angular.element('.sweet-alert').hide();
    
                        //do something else here  
    
                    });

    Non so se questo è l’approccio giusto , ma per me funziona.

Lascia un commento