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。

关闭浏览器后退按钮上的$ mdDialog - AngularJS

1 个答案: