如何为 ngDialog 自定义关闭对话框功能？答案

【问题标题】：How to customize close dialog function for ngDialog?如何为 ngDialog 自定义关闭对话框功能？
【发布时间】：2017-08-14 15:36:48
【问题描述】：

我必须为ngDialog 的关闭按钮实现一个自定义关闭对话框功能。

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

我已尝试使用preCloseCallback() 方法，但不知何故它对我不起作用，因为它不等待用户确认。这就像单击关闭和对话框时调用的函数一样，根据我立即从函数返回的内容，关闭或保持打开状态。如果我不返回任何内容，它会假定它为真并关闭对话框。

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

【问题讨论】：

标签： javascript angularjs customization ng-dialog

【解决方案1】：

好的解决方案来了！这有点 hacky，但非常适合我的情况。

第 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>

哟...完成了工作...!!!

这个解决方案最好的部分是关闭任何表单的通用代码，所以一旦你完成了工厂功能，你只需要在 HTML 中任何需要的地方添加关闭按钮，并在控制器中添加简单的关闭功能

【讨论】：