Javascript 如何自定义ngDialog的关闭对话框功能？

我必须为

ngDialog

的关闭按钮实现一个定制的关闭对话框功能

根据要求，在某些情况下（有表单的情况下），我必须显示另一个ngDialog确认弹出窗口，询问用户是否真的想关闭对话框，因此有两个选项“是”和“否”，具有此行为

我用

preCloseCallback（）

方法进行了尝试，但不知何故，它对我不起作用，因为它不等待用户确认。这就像单击关闭时调用的函数，对话框关闭或保持打开取决于我立即从函数返回的内容。如果我没有返回任何内容，它将假定它为真并关闭对话框

---

有谁能告诉我解决这个问题的方法吗？

好办法来了！这有点老套，但对我的案子很有效

步骤1

打开对话框时，将

showClose

选项设置为false

// In controller
PopUpFactory.openModal('SOME_NAME','SOME_URL.html', 'ngdialog-theme-default SOME_EXTRA_CSS', $scope, function(value){
    console.log("Done:", value);
},'SOME_CONTROLLER',false); // false passes to set **showClose** option false

// In common Factory
function openModal(name, templateUrl, classes, scope, callback, ctrl, showClose){
    if(showClose === undefined){
        showClose = true;
    }
    ngDialog.openConfirm({
        name: name,
        controller: ctrl,
        template: templateUrl,
        className: classes,
        closeByDocument: false, // to prevent popup close by clicking outside
        closeByEscape: false,   // to prevent popup close by ESC key 
        closeByNavigation : true, // to close popup on state navigation
        scope: scope,
        disableAnimation: true,
        showClose: showClose,
        preCloseCallback: function(value) {
            return true;
        }
    }).then(function (value) {
        callback(value);
    });
}

步骤2

编写公共关闭按钮处理函数

// In Common Factory
/**
 * Customize close for any open modal form
 * @param isDirty - flag saying if form is dirty
 * @param $scope - scope object of current open form
 * @param $event - $event object passed from close button of open form
 */
var closeConfirmOpen = false;
function closeForm(isDirty,$scope,$event){
    // following lines are important to prevent default behavior of ngDialog close event
    if($event){
        $event.preventDefault();
        $event.stopPropagation();   
    }
    
    if(isDirty){
        var msg = $filter('translate')('navigateAwayWithoutSavingConfirmMsg');
        closeConfirmOpen = true;
        confirmPopUp('Warning', msg, null, 'leavePage', 'red', 'stayOnPage', function(isOK){
            if(isOK == 1){ 
                $scope.closeThisDialog();
            }
            closeConfirmOpen = false;
        });
    }else{
        $scope.closeThisDialog();
    }
}

步骤3

在控制器中写入关闭函数以调用工厂函数

/**
 * Close sample location modal
 */
 $scope.closeForm = function($event){
     PopUpFactory.closeForm($scope.formName.$dirty,$scope,$event);
 }

步骤4

在为ngDialog的HTML定义标题/标题后添加以下行

<div id="SOME_ID" class="ngdialog-close" ng-click="closeForm($event)"></div>

哟。。。完成任务了

这个解决方案最好的部分是一个用于关闭任何表单的通用代码，所以一旦您使用了factory函数，您只需要在HTML中需要的地方添加close按钮，并在controller中添加简单的close函数