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

问题描述

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

父控制器(相关部分):

$scope.deleteConfirm = function(toDelete) {控制台.log(toDelete);var modalObj = {templateUrl: 'views/templates/delete.html',控制器:'DeleteCtrl'，尺寸:'sm'，解决: {删除:函数(){返回删除；},集合:函数(){返回 $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 = 函数(){collection.$remove(toDelete).then(function(ref) {$modalInstance.close(ref);});};$scope.cancel = 函数 () {$modalInstance.dismiss('取消');};}]);

模态模板:

解决方案

在 modal 与 1.4.x angular 版本的 ng-animate 一起使用时似乎存在问题.由于 ng-animate 仅在转换完成后才延迟移除 DOM 元素，因此该流程中存在一些问题.您可以通过在模态设置中关闭动画来快速修复它.logged in Github 有一个问题，上面写着1.4.x 尚未正式支持 ui 引导程序.

var modalObj = {templateUrl: 'views/templates/delete.html',控制器:'DeleteCtrl'，尺寸:'sm'，animation: 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屋！