Angularjs jQCloud在引导模式中无法正确显示

我使用这个插件的Word云。它在任何地方都能正常工作。但是，虽然它在angular ui模式中也可以正常工作，但它在引导模式中并没有正确显示。但是，我需要在

引导模式下使用它。在我的演示plunker中，您将看到它在任何地方都可以正常工作：

但在引导模式中，它看起来是这样的：


我怎样才能解决这个问题

发生这种情况是因为jQCloud.js中的代码：

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

在呈现页面时，弹出窗口被隐藏，因此元素的宽度和高度为零，因此它们显示在一个相互重叠的位置

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

首先，将
ng单击
callback添加到按钮：

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

第一个div作为占位符，在cloud渲染时显示空白（我同意，这不是很漂亮）

在控制器中创建
showCloud（）
回调并添加
isCloudVisible
属性：

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

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

注意，我已经向控制器参数添加了
$timeout
服务

请参阅工作。
可以使用简单的CSS解决方案来完成。只需为modal添加以下黑客代码：

.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  */ 
}

谢谢你的帮助。我现在面临的一个问题。事实上，在一个页面中，我有多个模态，如果一个弹出窗口打开，另一个弹出窗口的jQcloud就会像前一个一样显示出来。检查这个：如何解决这个问题？嗯，我的解决方案类似于概念证明。每个模态都应该有自己的可见性属性和按钮回调。我建议写一个指令，包括按钮和模态。好的，明白了，但问题是，我对angularjs非常陌生。我现在还不能自己写指令。你能帮我吗？事实上，它能用简单的CSS解决吗？请检查我的plunker更新：那里有引导选项卡。在选项卡上，由于一些选项卡最初是隐藏的，所以渲染会产生类似的问题。我在网上找到了一个CSS破解代码来解决这个标签渲染问题（请检查style.CSS）。类似的CSS也可以应用于Modal吗？实际上，它只能通过简单的CSS来解决：），这里是更新：顺便感谢您的时间。