Overflow!

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..

Controller:

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

I have tried the following:

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.

ponents.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!

Overflow!

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..

Controller:

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

I have tried the following:

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/#/demo/material.ponents.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!

• javascript
• android
• angularjs
• modal-dialog
• angular-material

Share Improve this question Follow asked Feb 18, 2015 at 21:46 Zackery GianottiZackery Gianotti 10711 silver badge99 bronze badges 2

• Any advance with this? – saulotoledo Commented Mar 20, 2015 at 12:14
• You can try this.. $scope.$on('$routeChangeStart', function() { $mdDialog.cancel(); }); – vs4vijay Commented Jul 16, 2015 at 6:58

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

I know this is answer es a bit late.

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

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]);

Cheers

According to my experience you have to use History API to achieve your goal. Thus, when you open your dialog you should push new state to history stack. And hence when user will hit back you can capture 'popstate' event and hide/close it from there.

You should also note that when dialog is closed in one of the designed ways (like clicking on backdrop) you should manually pop all the states you've pushed to the history stack.

Add this line to your app.run(..) :
$locationProvider.html5Mode(true)