$ modalInstance对话框关闭，但画面保​​持变灰，并且无法访问 [英] $modalInstance dialog box closes, but screen remains grayed out and inaccessible

问题描述

我采用了棱角分明的UI来打开和关闭模式。当我与关闭它提交（对象）或解雇（消​​息），对话框关闭，但屏幕遗体变灰，我无法访问我的应用程序。有些code：

I am using angular-ui to open and close a modal. When I close it with submit(object) or dismiss(message), the dialog box closes, but the screen remains grayed out and I can't access my app. Some code:

父控制器（相关部分）：

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

推荐答案

看起来有模态时，使用与 NG-动画的角度1.4.X版本的问题 。由于 NG-动画删除DOM元素只懒洋洋地过渡完成后有东西在那个流断裂。您可以通过在模态设置关闭动画快速修复它。有一个问题， 记录在Github上 它说， UI引导还没有正式完全的1.4.x的支持。

Looks like there is an issue when modal is used with 1.4.x angular version of ng-animate. Since ng-animate removes the DOM element only lazily after transition is done there is something breaking in that flow. You could quick fix it by turning off the animation in modal settings. There is an issue logged in Github which says that ui bootstrap is not yet officially supported fully with 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上可以看到，它已被固定在用户界面引导的最新版本，即一个的升级 0.13.3 或以上会解决这个问题。

If you follow the github link provided above you can see that it has been fixed in the latest version of ui bootstrap, i.e an upgrade of 0.13.3 or above will resolve the issue.

这篇关于$ modalInstance对话框关闭，但画面保​​持变灰，并且无法访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！