How to customize close dialog function for ngDialog?

Question

I have to implement a customized close dialog function for close button of ngDialog.

As per requirement in some cases (where there is a form) I have to show another ngDialog confirm popup asking if user really want to close the dialog or not so there are 2 options 'YES' and 'NO' which has this behavior.

I have tried it with preCloseCallback() method but somehow it did not worked for me as it does not wait for user confirmation. It is just like the function called on click of close and dialog closed or stays open depending on what I return from function immediately. If I don't return anything it assumes it to be true and closes the dialog.

Can anybody please let me know the way to solve this issue?

Answer 1

Here comes the nice solutions! It's bit hacky but worked perfectly for my case.

Step 1

Set showClose option false while opening dialog.

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

Step 2

Write common close button handling function

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

Step 3

Write a close function in controller to call factory function

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

Step 4

Add following line after defining header/title for HTML of ngDialog

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

Yooo... done the job...!!!

The best part of this solutions is a common code for closing any form, so once you done with factory function, you only need to add close button wherever required in HTML and add simple close function in controller