javascript - 单击浏览器后退按钮关闭 $mdDialog - AngularJS

Question

我目前有一个 $mdDialog，当它打开时是整页并且其中有一个表单。当用户单击取消时，$mdDialog 将通过调用此函数关闭

$mdDialog.cancel();

但是，我还想在用户单击浏览器后退按钮时关闭 $mdDialog，这就是我想要做的

backButtonWasClicked = function() }
  $mdDialog.cancel();
}

如何做到这一点？我考虑过当 $mdDialog 显示为 mywebsite.com/page#dialog 时在 URL 中放置一个散列，然后当用户单击后退按钮时它可以以某种方式查看此散列并关闭对话框并删除散列。我不确定这是否是最好的方法。

有什么办法可以做到这一点吗？

Answer 1

我为可能需要相同功能的任何人找到了解决方案。

这是创建我的 $mdDialog

的代码

$scope.showOrderFormOverlay = function (ev) {
    $mdDialog.show({
        templateUrl: '/Partials/dialog.html',
        parent: angular.element(document.body),
        targetEvent: ev,
        clickOutsideToClose: false,
        escapeToClose: false,
        fullscreen: true,
        focusOnOpen: false,
        onComplete: function () {
            $('.md-dialog-container').addClass('fullscreen');
            $location.hash("this-can-be-whatever");
        }
    });
};

我将 $location 注入(inject)到创建我的 $mdDialog 的 Controller 中。然后，我将这一行 $location.hash("this-can-be-whatever") 添加到 onComplete 函数中。这会在当前 url mywebsite.com/page 中添加一个散列，因此在您打开 $mdDialog 后，它看起来像这样 mywebsite.com/page#this -可以是任何。

然后在我的 $mdDialog Controller 中我添加了这个函数，

window.onpopstate = function () {
    if (window.location.hash == "") {
        $mdDialog.cancel();  // Cancel the active dialog
    }
}

这将从 url 中删除散列并关闭 $mdDialog。