AngularJS Material - 使用 Phone "back" 按钮关闭对话框

Question

溢出！

我是第一次构建 Angular Material 站点，我似乎遇到了对话框功能的问题。除了在移动设备上，我可以让盒子正常显示和关闭。即，当用户在 phone 上按下 "Clear" 或 "Back Button" 时。当您执行此操作（或单击浏览器上的后退按钮）时，它不会影响对话框。它保留在视图中并等待输入。按 ESC 键关闭它。 phone 上的任何人都会本能地认为他们可以摆脱它，我认为他们应该这样做。我已经尝试过各种不同的方法，但它们都不起作用，我只是没有正确实施它们。所以，这里是..

控制器：

'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)

还尝试使用 "navigation" 技巧在按下后退按钮时关闭对话框，但它不起作用。

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

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

它们的写法有点不同，但它们在桌面和 phone 上的作用与我的相同。

提前感谢任何可以阐明的人！我很感激！

Answer 1

根据我的经验，您必须使用历史记录 API 来实现您的目标。因此，当您打开对话框时，您应该将新状态推送到历史堆栈。因此，当用户回击时，您可以捕获 'popstate' 事件并从那里捕获 hide/close 它。

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

Answer 2

将此行添加到您的 app.run(..) :
$locationProvider.html5Mode(true)

Answer 3

我知道这个回答有点晚了。

我遇到了同样的问题，并且能够通过利用路由事件来解决它。路由变化时，关闭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]);

干杯

AngularJS Material - 使用 Phone "back" 按钮关闭对话框

AngularJS Material - Dialog Close Using Phone "back" Button

javascript

android

angularjs

modal-dialog

angular-material