在脏表单上确认角模态关闭

Question

我有一个带有表单的 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
    });
}

Answer 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

Answer 2

我使用$scope.$on修复它，这里有广泛的例子

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

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