ngDialogのダイアログ機能を閉じるには？

Question

カスタマイズされた閉じるダイアログ機能を閉じるボタンngDialogに実装する必要があります。

場合によっては（フォームがある場合）、別のngDialogでユーザーが実際にダイアログを閉じるかどうかを確認するポップアップを表示する必要があるため、2つのオプション 'YES'と 'NO'がありますこの動作。

私はpreCloseCallback()メソッドで試してみましたが、何とかそれは私のために働いていませんでした。は、ユーザー確認を待っていません。それは、私が関数から直ちに返すものに応じて、クローズのクリックで呼び出された関数と同じです。私が何も返さなければ、それは真であると仮定し、ダイアログを閉じます。

誰でも私にこの問題を解決する方法を教えていただけますか？

Answer 1

ここでは素晴らしいソリューションがあります。ちょっとハッキリですが、私の場合は完璧に働いていました。

ステップ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

ngDialog

のHTMLのヘッダー/タイトル

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

Yoooを定義した後、次の行を追加します...仕事をして...！

このソリューションの最良の部分は、あなたがファクトリ関数で行わいったんので、あなただけのHTMLに必要な場所に閉じるボタンを追加し、コントローラ

にシンプルなクローズ機能を追加する必要があり、任意のフォームを閉じるための共通のコードです