Question

我有一个带有表单的Angular-UI模式。当用户触发dismiss事件时，我想实现基于$ 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的提交按钮＆n-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修改了广泛的示例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

此解决方案对我有用。 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();
                }
            }
        }
    });

确认脏形状上的角度模态关闭

3 个答案: