无法关闭模态并更改页面位置

时间:2013-12-29 16:22:44

标签: angularjs twitter-bootstrap-3 angular-strap

我正在使用Angular-Strap来提供我的模态,我遇到了解开模态然后导航到另一个页面的问题。由于某些原因,我只能解除模态,如果我不使用$ location.path并且一旦我添加它然后它解散模态本身并导航到新页面但灰色背景仍然坚持。我一直在寻找回电,但我还没有找到办法一起完成这两项行动。

模态调用

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

打电话打开模态

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

当他们在模态

上点击删除时调用
$scope.deleteProduct = function (id,dismiss) {
            //ProductSvc.deleteProduct(id).success(function ($resp) {
            dismiss();
            //$scope.hideDeleteModal = true;
            $location.path('product/');

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

删除模式

<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>

2 个答案:

答案 0 :(得分:7)

我一直有同样的问题托尼。现在,这感觉很脏,但我注意到在调用$(模态).modal('hide') - 或切换 - 后,.modal-backdrop在位置更改后停留在屏幕上。所以,我这样做了:

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

几个类似的帖子建议使用角带或角度ui引导,但我现在不想进入这两个方向。

编辑:UI-bootstrap

答案 1 :(得分:0)

我也有这个问题。如果你使用角度bootstrap 0.13.0尝试降级到0.12.1。这解决了我的问题。

原因似乎与ngAnimate 1.4.2 https://github.com/angular-ui/bootstrap/issues/3633

不相容