Angularjs Can';t关闭模式并更改页面位置

Angularjs Can';t关闭模式并更改页面位置,angularjs,twitter-bootstrap-3,angular-strap,Angularjs,Twitter Bootstrap 3,Angular Strap,我正在使用Angular Strap来提供模态,但我遇到了一个问题,即取消模态,然后导航到另一个页面。出于某种原因,如果我没有使用$location.path,我只能关闭模式,一旦我添加了它,它就会关闭模式本身并导航到新页面,但灰色背景仍然存在。我一直在寻找回电,但我还没有找到一种方法来同时执行这两个操作 模态呼叫 var modal = $modal({ template: '/Product/Delete', persist: true,

我正在使用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);
        };
当他们点击模式上的delete时发出的呼叫

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

x
删除产品
是否确实要删除产品{{product.Name}

取消 删除
托尼,我也有同样的问题。现在,这感觉很脏,但我注意到在调用$(modal.modal('hide')或toggle之后,.modal背景在位置更改后仍保留在屏幕上。所以,我这样做了:

$('#cancelModal').modal('toggle');
$('.modal-backdrop').remove();
$location.path('/');
一些类似的帖子建议使用angular strap或angular ui引导,但我现在不想朝这两个方向走


编辑:

我也有这个问题。如果您使用的是角度引导0.13.0,请尝试降级到0.12.1。这为我解决了这个问题


原因是似乎与ngAnimate 1.4.2不兼容,我最终采用了不同的方法,但我仍计划在另一点上使用它,我将尝试一次,如果成功,请返回并标记此答案。感谢您的回答:D您采取了什么方法?我测试了不同的前端体验,最终在前端采用了不同的方法。从MVC->pure AngularJS/WebAPI->AngularJS&MVC->MVC&WebAPI&Spreaded AngularJS跳转。但我还没有达到需要模态的程度。我当时正在测试crud屏幕,现在我实际上正在研究真正的应用程序结构。我最终回到了ui引导,用于调整TWB行为,效果相当好。我通常在CRUD Delete用例中使用modals。是的,这正是我需要它的原因。您是否同时使用角度引导和ui引导?我读到你可以混搭,但我觉得这会让东西在未来的维护中变得有点脆弱。