如何从任何地方关闭 Angular UI Modal

Posted 2023-02-21

【中文标题】如何从任何地方关闭 Angular UI Modal

【英文标题】：How to close Angular UI Modal from anywhere

【发布时间】：2014-10-16 05:52:28

【问题描述】：

我正在使用Angular UI bootstrap modal dialog 并在服务中创建它：

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

【讨论】：

谢谢，就像一个魅力！我不知道为什么文档中没有提到这一点github.com/angular-ui/bootstrap/tree/master/src/modal/docs

@DonJuwe 同意，这会很有帮助，就像在 $http 成功关闭模式时一样。

非常感谢，他们的帮助非常重要。 +1 =)

太棒了。它也适用于 AngularUI，只需使用 $uibModalStack。

在函数参数中添加逗号

【参考方案2】：

我添加了以下行以防止浏览器后退按钮路由和关闭弹出窗口。我们需要将 $modalStack 注入到角度控制器中。

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

我有一个超时功能，它以$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  

                );

我不知道这是否是正确的方法，但它对我有用。