Behold, the wonderful solutions are here! Although a bit hacky, they worked like magic for my particular situation.
Step 1
To prevent popup close while opening dialog, set the showClose option to false.
// Inside 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 sets **showClose** option as false
// Inside 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,
closeByEscape: false,
closeByNavigation : true,
scope: scope,
disableAnimation: true,
showClose: showClose,
preCloseCallback: function(value) {
return true;
}
}).then(function (value) {
callback(value);
});
}
Step 2
Create a universal function to handle close button actions
// In Common Factory
/**
* Customize close for any open modal form
* @param isDirty - flag indicating if form is dirty
* @param $scope - current form's scope object
* @param $event - $event object from close button of open form
*/
var closeConfirmOpen = false;
function closeForm(isDirty,$scope,$event){
// 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
Add a close function in the controller to invoke the factory function
/**
* Close sample location modal
*/
$scope.closeForm = function($event){
PopUpFactory.closeForm($scope.formName.$dirty,$scope,$event);
}
Step 4
Insert the following line after defining the header/title in the HTML of ngDialog
<div id="SOME_ID" class="ngdialog-close" ng-click="closeForm($event)"></div>
Hurrah... job well done...!!!
The beauty of these solutions lies in the reusable code for closing any form. Once you've set up the factory function, all you need to do is add a close button wherever needed in the HTML and include a simple close function in the controller.