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

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

根据需要在某些情况下（有一个表单）我必须显示另一个ngDialog确认弹出询问用户是否真的要关闭对话框或没有，所以有2个选项'是'和'没有'有这种行为。

我试过用preCloseCallback()的方法，但不知何故它没有为我工作，因为它不等待用户确认。它就像在关闭点击时调用的函数一样，对话框关闭或保持打开，这取决于我立即从函数返回的内容。如果我没有返回任何东西，它会认为它是真实的并关闭对话框。

任何人都可以请让我知道解决这个问题的方法吗？

来源

2017-08-14 Code Spark

这里有很好的解决方案！这有点哈克，但为我的情况完美工作。

步骤1

设置showClose选项在打开的对话框假。

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

添加以下定义页眉/标题HTML ngDialog

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

Yooo ...的工作做好......后线！

这个解决方案的最好的部分是用于关闭任何形式的公共代码，所以一旦你的工厂函数来完成，你只需要在任何地方需要添加关闭按钮，在HTML和控制器

添加简单的关闭功能

来源

2017-08-14 15:36:48

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

回答

相关问题