Question

溢出！

我是第一次构建Angular Material网站，我似乎遇到了对话框功能的问题。我可以让盒子显示和关闭，除了在移动设备上。即，当用户按下＆＃34;清除＆＃34;或＆＃34;后退按钮＆＃34;通话中。执行此操作（或单击浏览器上的后退按钮）时，它对对话框没有影响。它仍在视野中并等待输入。按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)

还尝试使用＆＃34;导航＆＃34;如果按下后退按钮，则关闭对话框但不起作用的技巧。

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

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

它们的写法略有不同，但它们在桌面和手机上的行为与我的相同。

提前感谢任何可以放光的人！我很感激！

Answer 1

我知道答案有点迟了。

我有同样的问题，并且能够通过点击路由事件来解决它。路由更改时，请关闭mdDialog

示例代码。 app是您的应用启动时注册的角度应用代码

function appRun($rootScope, $mdDialog) {

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

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

}

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

干杯

Answer 2

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

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

Answer 3

将此行添加到app.run(..)：
$locationProvider.html5Mode(true)

AngularJS材料 - 对话关闭使用电话＆＃34;返回＆＃34;按键

3 个答案: