Question

我正在使用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()时关闭所有模态实例？

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

Answer 2

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

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

Answer 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  

                });

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

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

3 个答案: