Question

提交表单后，会向服务器发出呼叫并显示模式。当服务器的响应成功时，必须关闭模态并加载一个新页面。

我已经尝试过ng-show，ng-if根据控制器中的值启用/禁用，但这并没有消除模态背景。我能够使用data-dismiss =“modal”关闭同一页面上的模态，但是如何在导航到新页面之前从控制器部分执行此操作？

<div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">    
    <img src="img/processing.gif" id="ajaxSpinnerImage" title="working...">
  </div>
</div>

点击提交按钮时

<button type="submit" data-toggle="modal" 
data-target="#myModal"  ng-click=" formsubmit(orderForm.$valid); ></i>  
Place Order </button>

从Controller调用服务器

 $scope.formsubmit = function (isValid) {
      if (isValid) {                              
                  $http.post($scope.url).
                    success(function (data, status) {  

                        //NEED TO CLOSE THE MODAL HERE
                   //navigating to a new page now
                   window.location.assign("NewPageToNavigate.html");

                    })
      }

Answer 1

将此Bootstrap模式选项连接到服务器resopnse，模式将关闭：

$('#myModal').modal('hide');

More info and options on the Bootstrap documentation

关于删除正文和背景类，在正常条件下检查代码为Bootstrap应该在触发上述方法时删除它们。

Answer 2

在控制器中收到响应后关闭模态

$('#myModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

从服务器获得响应后关闭控制器中的Bootstrap模式

2 个答案: