CODEWITHSUNDEEP
angularjsmodal-dialogangular-ui-bootstrap
lucuma
lucuma

Reputation: 18339

Angular UI Dialog - Closing and Reopening from Dialog causes Background

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.

Upvotes: 1

Views: 9912

Answers (1)

lucuma
lucuma

Reputation: 18339

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

Upvotes: 1

Related Questions