mdDialog：捕获onClose事件

Question

我正在使用Angular创建一个邮箱。当弹出窗口关闭时，我需要保存草稿消息。

我知道有一些替代方案：

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

并且：

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

但是两种方法都不够好：

• 第一种情况是在对话框已经关闭时调用的。这是因为要求不可接受（需要打开一个 iFrame）。
• 第二种情况超出了 mdDialog 控制器的范围，并将责任交给了弹出窗口的调用者，而应该在弹出窗口本身中处理。

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

另一个选择是挂钩每个关闭事件。看起来很丑，但可能是解决方案。在这种情况下，我需要监听 escape 按钮和点击弹出窗口外部（虽然我可能会禁用该功能）...

有更好的想法吗？

谢谢！

编辑：

另一个问题：如何捕获 escape 键按下事件？我尝试过 <md-dialog aria-label="List dialog" ng-keypress="keyPress($event)"> 但它甚至没有触发...

- Thomas Stubbe

Answer 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>

JavaScript

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

- camden_kid

---

这就是我想要的，除了当按下“Esc”键或在对话框外单击时，关闭功能也应该被触发。因此，我希望在对话框关闭时无论如何都调用该关闭功能。我在问题中描述了两种方法来实现这一点，但它们要么超出了dialogController的范围（finally），要么是在HTML已经被销毁后执行的（scope.$on('$destroy')）。 - Thomas Stubbe

@ThomasStubbe 像这样的东西会有帮助吗？- http://codepen.io/camden-kid/pen/rrzOLP?editors=1010 - camden_kid

这确实是我还没有考虑过的可能性，而且会完成工作=）但是我担心我不能使用它：我有两个具体的DialogControllers，取决于消息的类型，并且它们都扩展自另一个BaseDialogController。每个控制器都超过200行，我从不同的位置调用show()，所以我不能只是将作用域传递给DialogController，这会带来很多问题。您知道一种方法可以做到这一点，但是为DialogController提供新范围，而不是传递它吗？ - Thomas Stubbe

@ThomasStubbe 很抱歉我无法提供帮助。祝你好运。 - camden_kid

@ThomasStubbe 为什么你需要防止函数返回？使用 preserveScope: true，我期望函数在关闭后仍然能够工作。或者你想在某些情况下防止关闭吗？如果是这样，重新打开模态框可能是一个好主意。 - fishbone

Answer 2

Dialog返回一个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(){

});

- Dipten