CODEWITHSUNDEEP
angularjstwitter-bootstrap-3angular-strap
Tony
Tony

Reputation: 3299

Can't dismiss modal and change page location

I am using Angular-Strap to provide my modals and I am having an issue with dismissing the modal and then navigating to another page. For some reason I can only dismiss the modal if I am not using $location.path and once I add it then it dismisses the modal itself and navigates to a new page but the grey background still sticks around. I was looking for call backs but I have not figured out a way to do these 2 actions together.

modal call

var modal = $modal({
            template: '/Product/Delete',
            persist: true,
            show: false,
            backdrop: 'static',
            scope: $scope
        });

call to open the modal

$scope.confirmDeleteProduct = function () {
            $q.when(modal).then(function (modalEl) {
                modalEl.modal('show');
            });
        };

call made when they hit delete on the modal

$scope.deleteProduct = function (id,dismiss) {
            //ProductSvc.deleteProduct(id).success(function ($resp) {
            dismiss();
            //$scope.hideDeleteModal = true;
            $location.path('product/');

            //});
            //$scope.products = _.without($scope.products, product);
        };

delete modal

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
            <h4>Delete Product</h4>
        </div>
        <div class="modal-body">
            <p>Do you really want to delete the product <strong>{{product.Name}}</strong>?</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn" ng-click="dismiss()">Cancel</button>
            <button type="button" class="btn btn-primary" ng-click="deleteProduct(product.Id,dismiss);">Delete</button>
        </div>
    </div>
</div>

Upvotes: 2

Views: 3271

Answers (2)

Ryan Ruppert
Ryan Ruppert

Reputation: 561

I was also having this issue. If you are using angular bootstrap 0.13.0 try downgrading to 0.12.1. This resolved the issue for me.

The cause is an appears to be an incompatability with ngAnimate 1.4.2 https://github.com/angular-ui/bootstrap/issues/3633

Upvotes: 0

muhr
muhr

Reputation: 91

I've been having the exact same problem Tony. Now, this feels dirty, but I noticed that after calling $(modal).modal('hide') -- or toggle -- that the .modal-backdrop stays on the screen after location changes. So, I did this:

$('#cancelModal').modal('toggle');
$('.modal-backdrop').remove();
$location.path('/');

Several similar posts suggest using angular-strap or angular-ui bootstrap, but I don't want to go in either of those directions right now.

EDIT: UI-bootstrap

Upvotes: 8

Related Questions