Question

我正在使用angular-ui打开和关闭模态。当我使用submit(object)或dismiss(message)关闭它时，对话框会关闭，但屏幕仍然显示为灰色，我无法访问我的应用。一些代码：

父控制器（相关部分）：

$scope.deleteConfirm = function(toDelete) {

console.log(toDelete);

var modalObj = {
  templateUrl: 'views/templates/delete.html',
  controller: 'DeleteCtrl',
  size: 'sm',
  resolve: {
    toDelete: function() {
      return toDelete;
    },
    collection: function() {
      return $scope.users;
    }
  }
}

var modalInstance = $modal.open(modalObj);

modalInstance.result.then(function (deletedItem) {
  console.log(deletedItem);
});

};

父html：

<button class="btn btn-danger btn-xs" ng-click="deleteConfirm(user)">X</button>

模态控制器：

.controller('DeleteCtrl', ['$scope', '$modalInstance', 'toDelete', 'collection', function ($scope, $modalInstance, toDelete, collection) {

$scope.toDelete = toDelete;

$scope.remove = function() {
    collection.$remove(toDelete).then(function(ref) {
        $modalInstance.close(ref);
    });
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};

}]);

模态模板：

<div class = "ll-modal">
<div class="modal-header">
<h3 class="modal-title">Confirm Delete</h3>
</div>
<div class="modal-body">
    Are you sure you want to delete this item? It will be gone forever.
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="remove()">Delete Permanently</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

Answer 1

当modal与ng-animate的1.4.x角度版本一起使用时，似乎存在问题。由于ng-animate在转换完成后只是懒惰地删除了DOM元素，因此该流程中存在一些问题。你可以通过在模态设置中关闭动画来快速修复它。有一个问题 logged in Github 表示ui bootstrap尚未完全正式支持1.4.x.

var modalObj = {
  templateUrl: 'views/templates/delete.html',
  controller: 'DeleteCtrl',
  size: 'sm',
  animation: false, //<-- Turn off
  resolve: {
    toDelete: function() {
      return toDelete;
    },
    collection: function() {
      return $scope.users;
    }
  }
}

或者只是全局关闭它：

app.config(function($modalProvider) {
  $modalProvider.options.animation = false;
});

<强>更新

如果您按照上面提供的github链接，您可以看到它已在最新版本的ui bootstrap中修复，即upgrade of 0.13.3 或更高版本将解决问题

Answer 2

现在，您可以将Angular 1.4.x与Bootstrap UI 0.13.3一起使用，问题就解决了。这是依赖：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script>

Answer 3

我正在使用棱角1.4.3 angualar-ui-bootstrap 0.13并且遇到了问题。

PSL答案有效（删除动画）......但没有动画导致糟糕的用户体验（恕我直言）。

由于各种原因，将角度恢复为1.3不是一种选择。

我尝试将ui-bootstrap从0.13降级到0.12.1 它对我有用

我知道ui-bootstrap 0.12.1只支持角度1.3 ......但是一切似乎对我有效，角度为1.4.3。鉴于我没有广泛使用ui-bootstrap，我想这没关系，但这可能并不适合所有人

Answer 4

这是我对此的快速决心，在您的模态html中只需粘贴;

<script>
$(document).ready(function () {
    $("button.close").click(function () {
        $(".modal-backdrop.fade").hide();
    });
}); </script>

$ modalInstance对话框关闭，但屏幕仍为灰色且无法访问

4 个答案: