Как закрыть Angular UI Modal из любого места

Я использую Angular модемное диалоговое окно пользовательского интерфейса и создаю его в службе:

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
        }
    };
}]);

Как закрыть все модальные экземпляры при вызове ModalService.close() с контроллера или вообще?

Ответы

Ответ 1

Внесите службу $modalStack и вызовите функцию $modalStack.dismissAll(), см. код GitHub:

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);
        }
    };
}]);

Ответ 2

Я добавил строку ниже, чтобы предотвратить маршрутизацию кнопки браузера и закрытие всплывающего окна. Нам нужно ввести $modalStack в контроллер angular.

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

Ответ 3

Вот как я получил его в моем проекте без использования каких-либо фабричных или дополнительных кодов.

  //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();

У меня есть функция тайм-аута, которая выдает logout как $rootScope.$emit('logout'); и слушатель в моем сервисе выглядит следующим образом:

$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  

                });

Я не знаю, правильный ли это подход, но он работает для меня.

Ответ 4

Я решил эту проблему в аналогичном вопросе в другом месте. Я бы сказал, что это определенно стоит того.

fooobar.com/info/2382396/...