Question

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

根据某些情况下的要求（有表格），我必须显示另一个ngDialog确认弹出窗口，询问用户是否确实要关闭对话框，因此有2个选项＆＃39; YES＆＃39;并且没有＆＃39;有这种行为。

我已尝试使用preCloseCallback()方法但不知何故它对我不起作用，因为它不等待用户确认。这就像点击关闭和对话框关闭时调用的函数或者保持打开状态，这取决于我立即从函数返回的内容。如果我没有返回任何内容，则认为它是真的并关闭对话框。

有人可以告诉我解决这个问题的方法吗？

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

Yooo ......完成了工作...... !!!

此解决方案的最佳部分是关闭任何表单的常用代码，因此一旦完成工厂功能，您只需要在HTML中的任何位置添加关闭按钮并在控制器中添加简单的关闭功能

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

1 个答案: