mdDialog：捕获 onClose 事件答案

【问题标题】：mdDialog: catch the onClose eventmdDialog：捕获 onClose 事件
【发布时间】：2017-02-07 12:13:56
【问题描述】：

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

我知道有一些选择：

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

和：

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

但两者都不够：

当对话框已经关闭时调用第一个。这是由于要求不可接受（有一个 iFrame 需要打开）
第二个在mdDialog的控制器范围之外，将责任交给弹出窗口的调用者，而它应该在弹出窗口本身。

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

另一种选择是挂钩每个关闭事件。看起来很难看，但可能是解决方案。在那种情况下，我需要听退出按钮并在弹出窗口之外单击（尽管我可能会禁用该功能）......

有更好的想法吗？

谢谢！

编辑：

一个附加问题：如何捕捉 escape-keypress 事件？我试过<md-dialog aria-label="List dialog" ng-keypress="keyPress($event)">，但它甚至没有被触发......

【问题讨论】：

标签： angularjs angular-material ondestroy mddialog oncloselistener

【解决方案1】：

也许使用 onRemoving 回调 - CodePen

来自文档：

标记

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

【讨论】：

这与我描述的第二种情况有相同的问题。我需要在模态的控制器中。我需要访问该范围，并且我希望模态本身负责在每次关闭时保存消息（我们是一个开发团队，对话框打开的位置有多个）
@ThomasStubbe 演示展示了如何使用对话框控制器中的函数关闭对话框。你的意思是通过点击外部关闭对话框？
演示完全不使用对话控制器：controller: SomeDialogController 应该添加到显示功能中。在该控制器内部有一个需要在关闭之前执行的函数。
这就是我想要的，除了关闭功能也应该在按下转义时触发，或者在对话框外点击。所以我想在对话框关闭时调用该关闭函数。我在问题中描述的两种方法，但它们要么超出了 dialogController 的范围（finally），要么在 HTML 已经被销毁之后（scope.$on('$destroy')）
@ThomasStubbe 需要这样的帮助吗？ - codepen.io/camden-kid/pen/rrzOLP?editors=1010

【解决方案2】：

对话框返回一个可以处理对话框关闭事件的承诺

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

});

【讨论】：