AngularJS材质-使用电话“返回"关闭对话框按钮 [英] AngularJS Material - Dialog Close Using Phone "back" Button

问题描述

溢出！

我是第一次构建Angular Material网站，而对话框功能似乎出现了问题.除了在移动设备上，我可以显示该框并关闭它.即，当用户按下电话上的清除"或后退按钮"时.当您执行此操作(或单击浏览器上的后退按钮)时，它对对话框没有任何影响.它保持可见状态并等待输入.按ESC键将其关闭.任何在电话上的人都会本能地认为他们可以清除它，我认为应该清除.我尝试了各种无法使用的方法，只是无法正确实现它们.所以，这去了.

I am building an Angular Material site for the first time and I seem to be having an issue with the Dialog box feature. I can get the box to display and close fine except on a mobile device. Namely, when the user presses the "Clear" or "Back Button" on the phone. When you do this (or click the back button on the browser) it has no affect on the dialog box. It remains in view and waiting for input. Pressing the ESC key closes it. Anybody on a phone would instinctively think they can clear out of it and in my opinion they should be. I have tried all sorts of various methods that either do not work I am just not implementing them properly. So, here goes..

控制器:

'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();
};
});

任何人都可以建议我愿意尝试.

Anything anybody can suggest I am willing to try.

我尝试了以下操作:

setCancellable(true)

还尝试使用导航"技巧来关闭对话框，如果按下了后退按钮，但它不起作用.

Also tried using a "navigation" trick to close the dialog box if the back button was pressed but it just doesnt work.

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

You can see an example that has the SAME functionality on the official docs site. If you check the Dialogs you can see their functionality is the exact same.

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

它们的书写方式略有不同，但它们在台式机和手机上的行为与我的相同.

They are kind of written a little differently but they act the same on a desktop and a phone as mine does.

在此先感谢所有可以发现的人！我很感激！

Thanks in advance to anybody who can shed light! I appreciate it!

推荐答案

我知道答案来得有点晚.

I know this is answer comes a bit late.

我遇到了同样的问题，并且能够通过路由事件来解决.路由更改时，关闭mdDialog

I had the same issue and was able to solve it by tapping into routing events. When routing changes, close mdDialog

示例代码. app是您启动应用程序时已注册的角度应用程序代码

Sample code. app is your angular app code is registered when the app is started

function appRun($rootScope, $mdDialog) {

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

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

}

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

欢呼

这篇关于AngularJS材质-使用电话“返回"关闭对话框按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！