mdDialog: catch the onClose event

问题

I'm creating a mailbox in angular. And I would need to save the draft message when the popup to send a message closes.

I know there are some alternatives:

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

and:

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

But both are insufficient:

The first is called when the Dialog is already closed. This is due to the requirements unacceptable (there is an iFrame that needs to be open)
The second is outside the scope of the controller of the mdDialog, and gives the responsibility to the caller of the pop-up, while it should be in the pop-up itself.

So I'm looking for way to call a function BEFORE the pop-up actually closes. Something like scope.$on("$mdDialogBeforeClose", function () { saveMessage() });

Another option would be to hook every close event. Seems ugly, but might be the solution. In that case I would need to listen to the escape-button and clicking outside the pop-up (Altough I might disable that function)...

Any better ideas?

Thx!

EDIT:

An addition question: How to catch the escape-keypress event? I tried <md-dialog aria-label="List dialog" ng-keypress="keyPress($event)"> but it's not even triggered...

回答1:

Maybe use the onRemoving callback - CodePen

From the docs:

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>

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);
        }
    });
  };
})

回答2:

Dialog return a promise using that you can handle dialog close event

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(){

});

来源：https://stackoverflow.com/questions/39765731/mddialog-catch-the-onclose-event

标签

angularjs

angular-material

ondestroy

mddialog

oncloselistener