mdDialog:捕获onClose事件

时间:2016-09-29 08:54:26

标签: angularjs angular-material ondestroy mddialog oncloselistener

我正在以角度创建邮箱。当发送消息的弹出窗口关闭时,我需要保存草稿消息。

我知道有一些选择:

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

和:

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

但两者都不够:

  • 当Dialog已经关闭时,第一个被调用。这是由于要求不可接受(有一个需要打开的iFrame)
  • 第二个超出了mdDialog控制器的范围,并且对弹出窗口的调用者负责,而它应该在弹出窗口中。

所以我正在寻找在弹出窗口实际关闭之前调用函数的方法。 像scope.$on("$mdDialogBeforeClose", function () { saveMessage() });

这样的东西

另一个选择是挂钩每个关闭事件。看起来很难看,但可能是解决方案。在这种情况下,我需要听取转义按钮并在弹出窗口外单击(Altough我可能会禁用该功能)......

有更好的想法吗?

THX!

编辑

另外一个问题:如何捕获escape-keypress事件?我试过<md-dialog aria-label="List dialog" ng-keypress="keyPress($event)">,但它甚至没有被触发......

2 个答案:

答案 0 :(得分:8)

也许使用onRemoving回调 - CodePen

来自文档:

enter image description here

标记

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

答案 1 :(得分:3)

Dialog使用您可以处理对话框关闭事件

的方式返回一个承诺
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(){

});