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

Question

I have an Angular-UI modal with a form in it. When the user triggers the dismiss event I want to implement a confirmation based on $dirty. I have searched through numerous sources to find notions on Promise and can succesfully get eg an alert during the closing event. However, I can't find anywhere how to actually stop the modal from closing.

EDIT:

With the current code the confirmation alert often (surprisingly not always) pops up after the modal has already been dismissed.

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

Add the $scope.ok method and hook it to the editForm's submit button's 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);
    };
}

Inject the $scope.edeitForm.$dirty as isDirty and use the injected value as you like

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

Hope this helped you :D

Answer 2

I fixed it using $scope.$on , extensive example 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           
    });
}

Answer 3

This solution works for me. Esc, X button on top and Close button at the bottom.

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