Question

暂时使用angular-ui但是在没有动画的情况下使用它时我无法摆脱黑色闪烁。这是plunker。

 $scope.opend = function() {
      var modalInstance = $modal.open({
      animation: false,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: 'sm',
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

单击几次，注意对话框打开/关闭时背景闪烁黑色。事实证明，在平板电脑上它会变得更糟。

即使他们在https://angular-ui.github.io/bootstrap/上的例子也在闪烁。

关于如何避免这种黑色闪烁的任何想法，或者我被迫改变使用的模态？

Answer 1

关闭对话框时遇到了这个问题。

在关闭之前隐藏对话框有点帮助：

$('.modal-dialog').hide();
// then call modalInstance.close()

为了修复项目中的所有对话框，我在config函数中创建了一个'decorator'：

angular.module( ... ).config( [..., '$provide', function(..., $provide){
        $provide.decorator('$modal', [
            '$delegate', function($delegate) {
                return {
                    open: function (modalOptions) {
                        var modifiedResult = $delegate.open(modalOptions);

                        var originalClose = modifiedResult.close;

                        modifiedResult.close = function (result) {
                            angular.element('.modal-dialog').hide();
                            originalClose(result);
                        }

                        return modifiedResult;
                    },
                    getPromiseChain: function() {
                        return $delegate.getPromiseChain();
                    }
                };
            }
        ]);
}] );

希望这会有所帮助

Answer 2

使用animation: true避免闪烁

Angular-ui模态，没有动画闪烁

2 个答案: