确认以脏形式关闭的角度模态答案

【问题标题】：Confirm angular modal closing on dirty form确认以脏形式关闭的角度模态
【发布时间】：2023-03-22 21:03:02
【问题描述】：

我有一个带有表单的 Angular-UI 模式。当用户触发关闭事件时，我想基于 $dirty 实现确认。我搜索了许多资源以找到有关 Promise 的概念，并且可以成功获得例如在结束活动期间发出警报。但是，我在任何地方都找不到如何真正阻止模式关闭。

编辑：

使用当前代码，确认警报通常（令人惊讶的是并非总是）在模式已被解除后弹出。

var editResourceModalController = function($scope, $uibModalInstance) {

    $uibModalInstance.result.catch(function() {
        if ($scope.editForm.$dirty) {
            window.confirm("close modal?");
        } 
        $uibModalInstance.dismiss('cancel');
    });

}

var uibModalInstance;
$scope.openEditModal = function() {
    uibModalInstance = $uibModal.open({
        animation: true,
        templateUrl: "edit.html",
        controller: editResourceModalController
    });
}

【问题讨论】：

标签： javascript angularjs twitter-bootstrap modal-dialog

【解决方案1】：

添加 $scope.ok 方法并将其与 editForm 的提交按钮的 ng-click 挂钩

var editResourceModalController = function($scope, editItem, hierarchy, selectedFolder) {
    $scope.form = {};
    $scope.editItem = editItem;
    $scope.editListItems = [];
    $scope.listItems = 0;
    $scope.getNumber = function(n) {
        return new Array(n);
    }
    $scope.hierarchy = hierarchy;
    $scope.selectedFolder = selectedFolder;
    $scope.editModel = {
        name: $scope.editItem.name,
        description: $scope.editItem.description,
        hierarchyId: $scope.selectedFolder
    }
    $scope.ok = function () {
        editItem.close($scope.editForm.$dirty);
    };
}

将 $scope.edeitForm.$dirty 注入为 isDirty 并根据需要使用注入的值

$scope.openEditModal = function(editItem, hierarchy, selectedFolder) {
    $scope.modalInstance = $uibModal.open({
        animation: true,
        templateUrl: "edit.html",
        controller: ["$scope", "editItem", "hierarchy", "selectedFolder", editResourceModalController],
        resolve: {
            editItem: function() {
                return editItem;
            },
            hierarchy: function() {
                return hierarchy;
            },
            selectedFolder: function() {
                return selectedFolder;
            }
        }
    });

    $scope.modalInstance.result.catch(function(isDirty) {
        if (isDirty) {
            // confirmation code here

        }else{
            // other logic
        }
        // dismiss the modal
        editItem.dismiss('cancel');
    });
}

希望这对你有所帮助：D

【讨论】：

感谢您的回答。但是，我不想只将它与按钮单击挂钩，我还想捕捉后退单击和 ESC 按钮关闭事件。此外，如果用户选择取消，我仍然不知道如何阻止模式实际关闭。我可以使用preventDefault()吗？
你为什么不为这些事件设置监听器并根据需要处理它们？
你能说得更具体一点吗？
设置 ng-click 取消按钮和背景元素.. 有意义吗？
非常感谢，但已修复（见我自己的回答）

【解决方案2】：

我使用$scope.$on 修复了它，扩展示例here

var editResourceModalController = function($scope, $uibModalInstance) {

    $scope.close = function() {
        $uibModalInstance.close();
    }

    $scope.$on('modal.closing', function(event) {
        if ($scope.editForm.$dirty) {
            if (!confirm("U sure bwah?")) {
                event.preventDefault();
            }
        }

    });
}

var uibModalInstance;
$scope.openEditModal = function(editItem, hierarchy, selectedFolder) {
    uibModalInstance = $uibModal.open({
        animation: true,
        templateUrl: "edit.html",
        controller: editResourceModalController           
    });
}

【讨论】：

【解决方案3】：

这个解决方案对我有用。 Esc，顶部的 X 按钮和底部的关闭按钮。

        function cancel() {
        if (vm.modalForm.$dirty) {
            var response = DevExpress.ui.dialog.confirm("You have unsaved changes. Would you like to discard them?");
            response.done(function (result) {
                if (result)
                    vm.dismiss({ $value: 'cancel' });
            });
        }
        else
            vm.dismiss({ $value: 'cancel' });
    }

    $scope.$on('modal.closing', function (event, reason) {
        if (reason === 'escape key press') {
            var message;
            if (vm.modalForm.$dirty) {
                message = "You have unsaved changes. Would you like to discard them?";
                if (!confirm(message)) {
                    event.preventDefault();
                }
            }
        }
    });

【讨论】：