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

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

$mdDialog.cancel();

但是，当用户单击浏览器的后退按钮时，我也想关闭$mdDialog，这是我要执行的操作

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

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

有什么办法可以做到吗？

最佳答案

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

这是创建我的$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函数中。这会向当前URL 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。

关于javascript - 在浏览器后退按钮上单击关闭$ mdDialog-AngularJS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38444122/