Angularjs jQCloud在Bootstrap Modal中无法正确显示

Question

我正在使用这个用于Word Cloud的angularjs插件。它无处不在。但是，它在Bootstrap Modal中没有正确显示，尽管它在角度ui模态下工作正常。但是，我需要在Bootstrap Modal处理它。在我的demo plunker中，你会发现它在任何地方都能正常工作：

但是在Bootstrap模式中，它看起来像这样：

我该如何解决这个问题？

Demo Plunker

Answer 1

这是因为jQCloud.js中的代码：

word_size = {
  width: word_span.width(),
  height: word_span.height()
}; 

在渲染页面时，弹出窗口是隐藏的，因此元素的宽度和高度均为零，因此它们会在一个相互重叠的位置显示。

要解决此问题，您应该以某种方式延迟显示云，直到显示弹出窗口。以下是如何做到这一点的一个例子，但我相信它并不是最好的。

首先，将ng-click回调添加到您的按钮：

<button type="button" ng-click="showCloud()" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open Popup
</button>

修改弹出式标记以向云显示一些$scope.isCloudVisible属性：

...
<div style="width: 500px; height: 350px;" ng-if="!isCloudVisible"></div>
<jqcloud words="words" width="500" height="350" steps="7" ng-if="isCloudVisible"></jqcloud>
...

第一个div是占位符，在云渲染时显示空白区域（这不太好，我同意）。

在您的控制器中创建showCloud()回调并添加isCloudVisible属性：

app.controller('myCtrl', function ($scope, $timeout) {
  ...
  $scope.isCloudVisible = false; 
  $scope.showCloud = function() {      
    $timeout(function() {
      $scope.isCloudVisible = true;
    }, 200);
  };      
});

请注意，我已将$timeout服务添加到控制器参数中。

见工作Demo。

Answer 2

可以使用简单的CSS解决方案。只需要为modal添加这些hack代码：

.modal {
    display: block;     /* undo display:none          */
    height: 0;          /* height:0 is also invisible */
    overflow-y: hidden; /* no-overflow                */
}
.modal.fade.in {
  height: auto;         /* let the content decide it  */ 
}

Demo