Angularjs jQCloud 在 Bootstrap 模态中显示不正确

Question

我正在使用这个 angularjs 词云插件。它无处不在。但是，尽管它在 angular ui 模态中也能正常工作，但它在 Bootstrap 模态中显示不正确。但是，我需要在 Bootstrap Modal 工作。在我的演示 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 作为占位符，在云渲染时显示空白 space（我同意，这不是很漂亮）。

在您的控制器中创建 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 {
    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

Angularjs jQCloud 在 Bootstrap 模态中显示不正确

Angularjs jQCloud does not show properly in Bootstrap Modal

word-cloud

angularjs

bootstrap-modal