6

I am using angular-ui to open and close a modal. When I close it with submit(object) or dismiss(message), the dialog box closes, but the screen remains grayed out and I can't access my app. Some code:

The parent controller (relevant part):

$scope.deleteConfirm = function(toDelete) {

console.log(toDelete);

var modalObj = {
  templateUrl: 'views/templates/delete.html',
  controller: 'DeleteCtrl',
  size: 'sm',
  resolve: {
    toDelete: function() {
      return toDelete;
    },
    collection: function() {
      return $scope.users;
    }
  }
}

var modalInstance = $modal.open(modalObj);

modalInstance.result.then(function (deletedItem) {
  console.log(deletedItem);
});

};

The parent html:

<button class="btn btn-danger btn-xs" ng-click="deleteConfirm(user)">X</button>

The modal controller:

.controller('DeleteCtrl', ['$scope', '$modalInstance', 'toDelete', 'collection', function ($scope, $modalInstance, toDelete, collection) {

$scope.toDelete = toDelete;

$scope.remove = function() {
    collection.$remove(toDelete).then(function(ref) {
        $modalInstance.close(ref);
    });
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};

}]);

The modal template:

<div class = "ll-modal">
<div class="modal-header">
<h3 class="modal-title">Confirm Delete</h3>
</div>
<div class="modal-body">
    Are you sure you want to delete this item? It will be gone forever.
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="remove()">Delete Permanently</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

PSL
  • 123,204
  • 21
  • 253
  • 243
compguy24
  • 937
  • 16
  • 33

4 Answers4

14

Looks like there is an issue when modal is used with 1.4.x angular version of ng-animate. Since ng-animate removes the DOM element only lazily after transition is done there is something breaking in that flow. You could quick fix it by turning off the animation in modal settings. There is an issue logged in Github which says that ui bootstrap is not yet officially supported fully with 1.4.x.

var modalObj = {
  templateUrl: 'views/templates/delete.html',
  controller: 'DeleteCtrl',
  size: 'sm',
  animation: false, //<-- Turn off
  resolve: {
    toDelete: function() {
      return toDelete;
    },
    collection: function() {
      return $scope.users;
    }
  }
}

or just turn it off globally:

app.config(function($modalProvider) {
  $modalProvider.options.animation = false;
});

Update

If you follow the github link provided above you can see that it has been fixed in the latest version of ui bootstrap, i.e an upgrade of 0.13.3 or above will resolve the issue.

PSL
  • 123,204
  • 21
  • 253
  • 243
4

You can now use Angular 1.4.x with Bootstrap UI 0.13.3 and the issue is resolved. Here is the dependency:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script>
adamconkey
  • 4,104
  • 5
  • 32
  • 61
0

I was working with angular 1.4.3 angualar-ui-bootstrap 0.13 and had the issue.

PSL answer worked (removed animation)... but no animation lead to bad user experience (IMHO).

Reverting angular to 1.3 is not an option for various reason.

I tried downgrading ui-bootstrap from 0.13 to 0.12.1 and it worked for me

I know ui-bootstrap 0.12.1 supports angular 1.3 only... but everything seems to works for me with angular 1.4.3. Given I don't use ui-bootstrap extensively, I guess it's OK, but this might not work for everyone

Filip
  • 906
  • 3
  • 11
  • 33
0

here is my quick resolve for this , in your modal html just paste;

<script>
$(document).ready(function () {
    $("button.close").click(function () {
        $(".modal-backdrop.fade").hide();
    });
}); </script>
Tamer Durgun
  • 401
  • 3
  • 9