在臟表單上確認角模態關閉

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