在浏览器后退按钮上单击关闭$ 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注入到创建$mdDialog的控制器中。 然后，我将此行$location.hash("this-can-be-whatever")到onComplete函数中。 这会在当前网址mywebsite.com/page添加一个哈希，因此，在打开$mdDialog ，它将看起来像是mywebsite.com/page#this-can-be-whatever 。

然后在$mdDialog的控制器中添加了此功能，

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

这将从网址中删除哈希并关闭$mdDialog 。