Angular UI Dialog — Closing and Reopening from Dialog causes Background

Problem

I am trying to close and reopen a dialog from the actual dialog controller’s view. What ends up happening is that after dialog close/open, it won’t properly close again. Escape works on some browsers (but the overlay remains) and clicking the background may cause the dialog to close but the overlay will remain (browser dependant).

Question: How can I close/reopen a dialog from a function/button/event on the dialog’s controller and that the dialog’s close works properly (on escape or clicking background).

The demo below is just a boiled down sample that demonstrates the issue as I will be doing a next/prev and I’d like to close/open on those clicks but am having this issue with not being able to exit the modal.

Here is the online demo: http://plnkr.co/h8djNiSlH6c7d8SNzMmb

  1. Open dialog
  2. Close dialog — works fine except IE (another issue).
  3. Open dialog
  4. Click button inside dialog to close/reopen
  5. Try to close the dialog

Controllers:

function PopupCtrl($scope, $dialog, dialog, item, Utils) {

$scope.items = Utils.getItems();
$scope.item = item;
$scope.reOpen = function (item) {
item = $scope.items[1];
dialog.close();
var d = $dialog.dialog({
dialogFade: true,
backdropClick: true,
dialogOpenClass: 'modal-open',
resolve: {
item: function () {
return angular.copy(item)
}
}
});
d.open('dialog.html', 'PopupCtrl');
};
}

function MainCtrl($scope, $window, $dialog, $location, $timeout, Utils) {
$scope.items = Utils.getItems();

$scope.openDialog = function (item) {
item = $scope.items[0];
var d = $dialog.dialog({
dialogFade: true,
dialogOpenClass: 'modal-open',
resolve: {
item: function () {
return angular.copy(item)
}
}
});
d.open('dialog.html', 'PopupCtrl');

};

}

I’ve tried this with angular bootstrap v0.2.0 and v.0.3.0 so it is either a bug or there is something I am missing with regards to how I am coding the logic.

Problem courtesy of: lucuma

Solution

This turned out to be an issue with the core dialog directive. Filed a issue and consequent pull request to address:

Details here: https://github.com/angular-ui/bootstrap/pull/381

Solution courtesy of: lucuma

View additional discussion.