Javascript 确认脏窗体上的角度模式关闭

我有一个有角度的UI模式，里面有一个表单。当用户触发dismise事件时，我希望基于$dirty实现确认。我已搜索了大量来源，以找到有关承诺的概念，并能成功地在闭幕活动期间获得例如警报。然而，我在任何地方都找不到如何真正阻止模态关闭

编辑：

对于当前代码，确认警报通常（令人惊讶的是，并不总是）在模式被解除后弹出

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

添加$scope.ok方法并将其挂接到editForm的submit按钮的ng click

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

希望这对你有帮助：D

---

我使用

$scope.$on

上的扩展示例修复了它

---

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

---

谢谢你的回答。但是，我不想只将其挂接到按钮单击上，我还想捕捉返回的下拉单击和ESC按钮取消事件。此外，如果用户选择取消，我仍然不知道如何阻止模态实际关闭。我可以使用

preventDefault（）

？为什么不为这些事件设置侦听器并根据需要处理它们？可以更具体一点吗？设置ng单击取消按钮和背景元素。。有意义吗？非常感谢，但在其他方面做了修正（见我自己的答案）

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

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

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