Question

我试图弄清楚为什么这个特殊的Bootstrap确认模式不能用于我想要的功能。它似乎与一个提出警报窗口的基本功能一起工作但是当我放置我想要的功能时，它执行该功能（在这种情况下从文件堆栈和我的数据库中删除一个图像）但它挂起模态窗口模态窗口关闭的位置，但是灰色叠加层卡住了，它使页面不再起作用。似乎正在举行此操作的功能位于modal-footer div的第一个按钮中。关闭按钮工作正常，当我用一个简单的函数代替removeMoreImage()函数时它再次工作正常以下是Bootstrap模式的代码：

        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#confirm-modal-more"> <span class= "glyphicon glyphicon-remove-circle"></span> REMOVE IMAGE</button>

        <div id="confirm-modal-more" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Remove Image Confirmation</h4>
            </div>
            <div class="modal-body">
              <p>Are you sure you want to delete this image?</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger"  data-ng-click="removeMoreImage(picture.url, car)" data-dismiss="modal" >REMOVE</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button>
            </div>
            </div>

          </div>
        </div>

这是正在执行导致挂断的函数：

var getIndexIfObjWithOwnAttr = function(array, attr, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i].hasOwnProperty(attr) && array[i][attr] === value) {
            return i;
        }
    }
    return -1;
}

$scope.removeMoreImage = function(image, data) {
    var index = getIndexIfObjWithOwnAttr(data.morePictures, 'url', image);
    data.morePictures.splice(index, 1);
    filepickerService.remove(image);
    console.log(image + " has been removed!");
}

任何见解或建议都会很棒。这似乎是同步问题，但我不确定。

Answer 1

我最终使用了一些查询来强制模态关闭，它似乎工作得很好虽然它不像我希望的那样优雅的解决方案，但它似乎工作。这是我添加到挂起模态的函数中的代码。

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

Answer 2

您可以关闭函数中的模态并将结果返回到父控制器：

$uibModalInstance.close('some result of modal');
$uibModalInstance.dismiss('some reason for discarding and closing');

$scope.removeMoreImage = function(image, data) {
    var index = getIndexIfObjWithOwnAttr(data.morePictures, 'url', image);
    data.morePictures.splice(index, 1);
    filepickerService.remove(image);
    console.log(image + " has been removed!");

    // close modal
    $uibModalInstance.close();
}

https://angular-ui.github.io/bootstrap/#/modal

具有角度的Bootstrap模态。模态未使用特定数据-ng-click功能关闭

2 个答案: