使用 AngularJS 在 javascript 中关闭 Bootstrap 2.3 和 UI-Bootstrap 模态

Question

我有一个带有 Boostrap 2.3.2 和 UI-Bootstrap webapp 的 AngularJS。我有这个功能可以从 javascript:

打开一个 UI-Bootstrap 模态组件

$scope.openProcessingBookingModal = function () {        
            var modalInstance = $modal.open({
              backdrop: 'static',
              templateUrl: 'partials/processing-booking-modal.html',
            });

            modalInstance.result.then(function (selectedItem) {
              $scope.selected = selectedItem;
            }, function () {
            });
        };

这是partials/processing-booking-modal中的模态框。html:

<div id="processing-modal" class="modal-body text-left alert alert-info" style="border: 0px; padding: 30px !important">
    <h3><i class="fa-icon-time"></i> {{'PROCESSING_BOOKING_1' | translate}} 
        <img src="img/spinners/ajax-loader-2.gif" 
             class="img-loader-small" 
             style="margin-left: 1px; vertical-align: inherit;"></img>
    </h3>
    <div class="row-fluid" style="margin-top: 10px">
        <p>{{'PROCESSING_BOOKING_2' | translate}}</p>
        <p>{{'PROCESSING_BOOKING_3' | translate}}</p>
        <p>{{'PROCESSING_BOOKING_4' | translate}}</p>
    </div>
</div>

我想打开和关闭的函数：

var CreditCardPayment = function (paymentType) {


                        $scope.openProcessingBookingModal();

                        Booking.book({id: $scope.id}, function success(result) {

                                $scope.booking = result;                                                            
                                $scope.closeProcessingBookingModal();

如何在另一个函数 closeProcessingBookingModal 中从 javascript 以编程方式关闭模式？

Answer 1

试试这个：

$scope.openProcessingBookingModal = function () {        
            var modalInstance = $modal.open({
              backdrop: 'static',
              templateUrl: 'partials/processing-booking-modal.html',
            });
            // capture modal instance
            $scope.myModalInstance = modalInstance;

            modalInstance.result.then(function (selectedItem) {
              $scope.selected = selectedItem;
            }, function () {
            });
        };

// somewhere in same controller
$scope.closeProcessingBookingModal() {
     if($scope.myModalInstance) {
          $scope.myModalInstance.close()
     }
}

我应该提到这个要求有点不自然，因为模态框通常会覆盖整个屏幕，并且通常会在其自己的控制器中关闭。

更新：

刚刚看到对该问题的更新评论。我想这个用例很合适。

使用 AngularJS 在 javascript 中关闭 Bootstrap 2.3 和 UI-Bootstrap 模态

Closing Bootstrap 2.3 and UI-Bootstrap modal in javascript with AngularJS

twitter-bootstrap

angularjs

twitter-bootstrap-2