AngularJS Material - 使用电话“返回"关闭对话框按钮 [英] 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.

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

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.组件对话框

它们的编写方式略有不同，但它们在台式机和手机上的作用与我的一样.

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 是应用启动时注册的 angular 应用代码

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 Material - 使用电话“返回"关闭对话框按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！