web-dev-qa-db-ja.com

mdDialog：onCloseイベントをキャッチします

Angularでメールボックスを作成しています。また、メッセージを送信するためのポップアップが閉じたら、ドラフトメッセージを保存する必要があります。

私はいくつかの選択肢があることを知っています：

_scope.$on("$destroy", function () { saveMessage() });
_

そして：

_$mdDialog.show(...).finaly(function(){ saveMessage() });
_

しかし、両方とも不十分です。

  • 1つ目は、ダイアログがすでに閉じられているときに呼び出されます。これは、受け入れられない要件によるものです（開く必要のあるiFrameがあります）
  • 2つ目は、mdDialogのコントローラーの範囲外であり、ポップアップ自体にあるはずですが、ポップアップの呼び出し元に責任を与えます。

そのため、ポップアップが実際に閉じる前に関数を呼び出す方法を探しています。 scope.$on("$mdDialogBeforeClose", function () { saveMessage() });のようなもの

別のオプションは、すべてのクローズイベントをフックすることです。醜いようですが、解決策かもしれません。その場合、エスケープボタンを聞いてポップアップの外側をクリックする必要があります（ただし、その機能を無効にする場合があります）...

より良いアイデアはありますか？

どうも！

[〜＃〜]編集[〜＃〜]：

追加の質問：escape-keypressイベントをキャッチする方法は？ <md-dialog aria-label="List dialog" ng-keypress="keyPress($event)">を試しましたが、トリガーされません...

angularjsangular-materialondestroymddialogoncloselistener
8
Thomas Stubbe

たぶんonRemovingコールバックを使用してください- CodePen

ドキュメントから：

enter image description here

Markup

<div ng-controller="MyController as vm" id="popupContainer" ng-cloak="" ng-app="app">
   <md-button class="md-primary md-raised" ng-click="vm.open($event)">
      Custom Dialog
    </md-button>

  <script type="text/ng-template" id="test.html">
    <md-dialog aria-label="Test">
        Hello!
    </md-dialog>
  </script>
</div>

JS

angular.module('app',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('MyController', function($scope, $mdDialog) {
  this.open = function(ev) {
    $mdDialog.show(
      {
        templateUrl: "test.html",
        clickOutsideToClose: true,
        onRemoving: function (event, removePromise) {
          console.log(123);
        }
    });
  };
})
9
camden_kid

ダイアログは、ダイアログクローズイベントを処理できることを使用してpromiseを返します

var dialogPromise  = $mdDialog.show(
      {
        templateUrl: "test.html",
        clickOutsideToClose: true,
        onRemoving: function (event, removePromise) {
          console.log(123);
        }
    });

dialogPromise.then(function(){
   // hide method handler
   // You can write your code here that execute after dialog close
}, function(){

});
3
Dipten