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

Question

我正在使用 angular-ui 打开和关闭模式。当我使用 submit(object) 或 dismiss(message) 关闭它时，对话框会关闭，但屏幕仍呈灰色，并且我无法访问我的应用程序。一些代码:

父 Controller (相关部分):

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

.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 与 1.4.x Angular 版本的 ng-animate 一起使用时，似乎存在问题。由于 ng-animate 仅在转换完成后才延迟删除 DOM 元素，因此该流程中出现了一些问题。您可以通过在模式设置中关闭动画来快速修复它。有问题 logged in Github 这表明 1.4.x 尚未正式完全支持 ui bootstrap。

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 或更高版本将解决该问题。