web-dev-qa-db-ja.com

Angularjs bootstrap outside / escをクリックしたときのモーダル終了呼び出し

プロジェクトで Angular-ui/bootstrap モーダルを使用しています。

これが私のモーダルです：

_$scope.toggleModal = function () {
    $scope.theModal = $modal.open({
        animation: true,
        templateUrl: 'pages/templates/modal.html',
        size: "sm",
        scope: $scope
    });
}
_

[〜＃〜] esc [〜＃〜]ボタンをクリックするか、モーダル領域の外側をクリックすることで、モーダルを閉じることができます。これが発生したときに関数を実行する方法はありますか？どういうクロージングをキャッチするのかよくわかりません。

ng-click="closeModal()"を次のようにすることで、手動でモーダルを解除できることを知っています。

_$scope.closeModal = function () {
    $scope.theModal.dismiss('cancel');
};
_

誰もが助けることができれば、それは大歓迎です。

javascriptangularjsangular-uiangular-ui-bootstrap
20
bryan

はい、できます。却下イベントが発生し、その場合、約束は拒否されます。また、$modal.open()メソッドは、約束であるresultプロパティを持つオブジェクトを返すことに注意してください。

約束があれば...

//This will run when modal dismisses itself when clicked outside or
//when you explicitly dismiss the modal using .dismiss function.
$scope.theModal.result.catch(function(){
    //Do stuff with respect to dismissal
});

//Runs when modal is closed without being dismissed, i.e when you close it
//via $scope.theModal.close(...);
$scope.theModal.result.then(function(datapassedinwhileclosing){
    //Do stuff with respect to closure
});

ショートカットとして次のように書くことができます：

 $scope.theModal.result.then(doClosureFn, doDismissFn);

参照を参照

Openメソッドは、モーダルインスタンス、次のプロパティを持つオブジェクトを返します。

  • close（result）-モーダルを閉じて結果を渡すために使用できるメソッド
  • dismiss（reason）-理由を渡して、モーダルを却下するために使用できるメソッド
  • 結果-モーダルが閉じられたときに解決され、モーダルが閉じられたときに拒否される約束
  • オープン-コンテンツのテンプレートをダウンロードし、すべての変数を「レンダリング」して解決した後にモーダルが開かれたときに解決されるプロミス-モーダルがレンダリングされたときに解決されるプロミス。
26
PSL

古い質問ですが、さまざまな閉じるアクションで確認ダイアログを追加する場合は、これをモーダルインスタンスコントローラーに追加します。

$scope.$on('modal.closing', function(event, reason, closed) {
    console.log('modal.closing: ' + (closed ? 'close' : 'dismiss') + '(' + reason + ')');
    var message = "You are about to leave the edit view. Uncaught reason. Are you sure?";
    switch (reason){
        // clicked outside
        case "backdrop click":
            message = "Any changes will be lost, are you sure?";
            break;

        // cancel button
        case "cancel":
            message = "Any changes will be lost, are you sure?";
            break;

        // escape key
        case "escape key press":
            message = "Any changes will be lost, are you sure?";
            break;
    }
    if (!confirm(message)) {
        event.preventDefault();
    }
});

私の右上に閉じるボタンがあり、「キャンセル」アクションをトリガーします。背景（有効になっている場合）をクリックすると、キャンセルアクションがトリガーされます。これを使用して、さまざまな終了イベントに異なるメッセージを使用できます。他の人に役立つ場合に備えて共有したいと思います。

19
Tiago

$ modal.open（）メソッドによって返される「結果」プロミスを使用できます。うなり声として：

 $scope.toggleModal = function () {
      $scope.theModal = $modal.open({
          animation: true,
          templateUrl: 'pages/templates/modal.html',
          size: "sm",
          scope: $scope
      });

      $scope.theModal.result.then(function(){
          console.log("Modal Closed!!!");
      }, function(){
          console.log("Modal Dismissed!!!");
      });
 }

また、以下のように「結果」プロミスの「最終」コールバックを使用できます。

     $scope.theModal.result.finally(function(){
          console.log("Modal Closed!!!");
      });
11
Yashika Garg

私の場合、モーダルをクリックしてオフにすると、モーダルフォームに保存されていないデータがすべて破棄されることをユーザーに警告するプロンプトを表示する必要がありました。これを行うには、モーダルで次のオプションを設定します。

var myModal = $uibModal.open({
          controller: 'MyModalController',
          controllerAs: 'modal',
          templateUrl: 'views/myModal.html',
          backdrop: 'static',
          keyboard: false,
          scope: modalScope,
          bindToController: true,
        });

これにより、クリックしてモーダルが閉じないようにします。

backdrop: 'static'

これにより、「esc」を押すとモーダルが閉じなくなります。

keyboard: false

次に、モーダルコントローラーにカスタムの「キャンセル」機能を追加します。私の場合、ユーザーがモーダルを閉じたいかどうかを尋ねる甘いアラートがポップアップ表示されます。

  modal.cancel = function () {
    $timeout(function () {
      swal({
        title: 'Attention',
        text: 'Do you wish to discard this data?',
        type: 'warning',
        confirmButtonText: 'Yes',
        cancelButtonText: 'No',
        showCancelButton: true,
      }).then(function (confirm) {
        if (confirm) {
          $uibModalInstance.dismiss('cancel');
        }
      });
    })
  };

最後に、モーダルコントローラー内で、次のイベントリスナーを追加します。

  var myModal = document.getElementsByClassName('modal');
  var myModalDialog = document.getElementsByClassName('modal-dialog');

  $timeout(function () {
    myModal[0].addEventListener("click", function () {
      console.log('clicked')
      modal.cancel();
    })

    myModalDialog[0].addEventListener("click", function (e) {
      console.log('dialog clicked')
      e.stopPropagation();
    })
  }, 100);

「myModal」は、modal.cancel（）コールバック関数を呼び出す要素です。 「myModalDialog」はモーダルコンテンツウィンドウです。この要素のイベント伝播を停止して、「myModal」にバブルアップしないようにします。

これは、モーダルをクリックする（つまり、背景をクリックする）場合にのみ機能します。 「esc」を押しても、このコールバックはトリガーされません。

1
Maegan Womble

ng-click="closeModal()"の代わりにng-click="$dismiss()"を試すことができます

<button ng-click="$dismiss()">Close</button>
0
Felipe Anselmo