AngularJS材料 - 使用手机“返回”按钮关闭对话框

Question

溢出!

我第一次构建一个Angular Material网站，似乎在Dialog框功能上遇到了问题。我可以很好地显示和关闭框，除了在移动设备上。也就是说，当用户按下手机上的“清除”或“返回按钮”时。当你这样做（或在浏览器上单击后退按钮），它对对话框没有影响。它保持在视图中等待输入。按ESC键关闭它。任何使用手机的人都会本能地认为他们可以清除它，在我看来他们应该这样做。我尝试了各种各样的方法，要么不起作用，要么我只是没有正确实现它们。所以，这里是……

控制器：

'use strict'; 
app.controller('NavCtrl', function ($scope, $mdDialog) {    
$scope.itworked = "Angular Successful";
var dialogContent = ' \
    <md-content> \
      <div class="diagtest">Content</div> \
        <p class="awesome"><a href="#/" ng-click="hide()">This link works</a></p> \
        <p><a href="#/portfolio" ng-click="hide()">This link also works</a></p> \
        <p>filler</p> \
    </md-content> \
';
var noForm = '<md-dialog id="navDialog">' + dialogContent + '</md-dialog>';
var formAround = '<form ng-submit="hide()"><md-dialog>' + dialogContent + '</md-dialog></form>';
var formInside = '<md-dialog><form ng-submit="hide()">' + dialogContent + '</form></md-dialog>';

function makeDialog(tmpl) {
    return function(ev) {
        $mdDialog.show({
            template: tmpl,
            targetEvent: ev,
            controller: 'DialogController'
        });
    };
}
$scope.dialogNoForm = makeDialog(noForm);
$scope.dialogFormAround = makeDialog(formAround); \\ This is for future use
$scope.dialogFormInside = makeDialog(formInside); \\ so is this...
});
app.controller('DialogController', function($scope, $mdDialog) {
$scope.hide = function() {
    $mdDialog.hide($scope.participant);
};
$scope.cancel = function() {
    $mdDialog.cancel();
};
});

任何人能提出的建议我都愿意尝试。

我已经尝试了以下方法：

setCancellable(true)

我曾尝试使用“导航”技巧，如果按下后退按钮，则关闭对话框，但它并没有起作用。

您可以在官方文档网站上看到具有相同功能的示例。如果您检查对话框，则可以看到它们的功能完全相同。

https://material.angularjs.org/#/demo/material.components.dialog

它们的编写方式有些不同，但在桌面和手机上的表现与我的相同。

感谢任何能提供帮助的人！我非常感激！

- Zackery Gianotti

---

这个有进展了吗？ - saulotoledo

你可以试试这个.. $mdDialog.cancel(); }); - vs4vijay

Answer 1

我知道我的回答有点晚了。

我遇到了同样的问题，但通过拦截路由事件来解决。当路由改变时，关闭mdDialog。

以下是示例代码。`app`是您的Angular应用程序代码，在应用程序启动时注册。

function appRun($rootScope, $mdDialog) {

    $rootScope.$on('$stateChangeSuccess',
        function (event, toState, toParams, fromState) {

            //close any open dialogs
            $mdDialog.cancel();
        });

}

app.run(['$rootScope', '$mdDialog', appRun]);

干杯

- Chintana Meegamarachchi

---

非常干净简洁的解决方案。这是一个相当普遍的问题，而这绝对是我见过的最好的解决方案。 - Martin

Answer 2

根据我的经验，您需要使用History API来实现您的目标。因此，在打开对话框时，您应该将新状态推送到历史堆栈中。因此，当用户点击返回时，您可以捕获“popstate”事件并从那里隐藏/关闭它。

您还应该注意，当以设计的某种方式（例如单击背景）关闭对话框时，您应手动弹出所有已推送到历史堆栈中的状态。

- krassx

Answer 3

将此行代码添加到您的 app.run(..) 中：
$locationProvider.html5Mode(true)

- Avijit Gupta

---

不要忘记在你的 app.run(..) 中注入 $locationProvider。 - Avijit Gupta