如何从任何地方关闭角度UI模态

I am using the Angular UI bootstrap modal dialog and create it within a service:

我正在使用角UI引导模式对话框，并在服务中创建它:

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

How can I close all modal instances when calling ModalService.close() from a controller or whatsoever?

如何在从控制器调用ModalService.close()时关闭所有模态实例?

3 个解决方案

#1

Inject the $modalStack service and call the function $modalStack.dismissAll(), see the code on GitHub for details:

注入$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

I added the below line to prevent browser back button routing and closing the popup. We need to inject $modalStack into angular controller.

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

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

#3

This is how i got it working in my project

这就是我如何让它在我的项目中发挥作用的

angular.element('.inmodal').hide();

angular.element(.inmodal)hide();

If you want to hide any other modals such as angular material dialog ($mdDialog) & sweet alert dialog's, use angular.element('.modal-dialog').hide(); & angular.element('.sweet-alert').hide();

如果您想隐藏任何其他的模式，如角材质对话框($mdDialog)和甜蜜提示对话框，请使用angular.element('.modal-dialog').hide();& angular.element(.sweet-alert)hide();

#1