单击浏览器后退按钮关闭 $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 函数中。这会向当前的 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
    }
}

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

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

Close $mdDialog on browser back button click - AngularJS

javascript

jquery

angularjs

angular-material