Hide Bootstrap 3 Modal & AngularJS redirect ($location.path)

Question

I'm using bootstrap 3 modal as a dialog confirmation in my AngularJS App. When i hide the modal and redirect the backdrop of the modal still remains.

$scope.delete = function () {   
  DataService.delete()
    .then(function () {
      $("#delete").modal("hide");
      $location.path("/");
    });
}

I have tried using the callback on hidden

$("#delete").on('hidden.bs.modal', function () { 
  $location.path("/");
}

But the delay in this is a lot.

Is there a better way to do this?

You can also take a look at the angular directives for bootstrap made by the angular-ui team http://angular-ui.github.io/bootstrap/ — zethus, Oct 14 '13 at 19:45

score 11 · Accepted Answer · answered Oct 14 '13 at 10:03

But the delay in this is a lot.

You are probably forgetting to call $scope.$apply(). Try changing it to the following (if the delay is the only problem) and the delay should be normal:

$("#delete").on('hidden.bs.modal', function () {
    $location.path("/");
    $scope.$apply();
});

All code that is called outside Angular (in this case from jQuery event) that interacts with Angular should call $apply().

Hide Bootstrap 3 Modal & AngularJS redirect ($location.path)

1 Answers1

Linked