$modalInstance 对话框关闭，但屏幕保持灰色且无法访问 [英] $modalInstance dialog box closes, but screen remains grayed out and inaccessible

问题描述

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

父控制器(相关部分):

$scope.deleteConfirm = function(toDelete) {console.log(toDelete);var modalObj = {templateUrl: 'views/templates/delete.html',控制器:'删除Ctrl'，尺寸:'sm'，解决: {删除:函数(){返回删除；},集合:函数(){返回 $scope.users;}}}var modalInstance = $modal.open(modalObj);modalInstance.result.then(function (deletedItem) {控制台日志(已删除项目)；});

};

父 html:

模态控制器:

.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 = 函数 () {$modalInstance.dismiss('cancel');};}]);

模态模板:

<div class="modal-header"><h3 class="modal-title">确认删除</h3>
<div class="modal-body">你确定要删除这个项目吗?它将永远消失.

<div class="modal-footer"><button class="btn btn-primary" ng-click="remove()">永久删除</button><button class="btn btn-warning" ng-click="cancel()">取消</button>

解决方案

看起来在将 modal 与 ng-animate 的 1.4.x 角度版本一起使用时会出现问题.由于 ng-animate 仅在转换完成后才懒惰地移除 DOM 元素，因此该流程中存在一些中断.您可以通过在模态设置中关闭动画来快速修复它.有一个问题 logged in Github 说1.4.x 尚未正式完全支持 ui bootstrap.

var modalObj = {templateUrl: 'views/templates/delete.html',控制器:'删除Ctrl'，尺寸:'sm'，动画:false,//<-- 关闭解决: {删除:函数(){返回删除；},集合:函数(){返回 $scope.users;}}}

或者只是全局关闭它:

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

更新

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

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:

The parent controller (relevant part):

$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);
});

};

The parent html:

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

The modal 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');
};

}]);

The modal template:

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

解决方案

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;
    }
  }
}

or just turn it off globally:

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

Update

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屋！