1

我正在为 Word Cloud 使用这个angularjs插件。它在任何地方都可以正常工作。但是，它在 Bootstrap 模态中不能正确显示，尽管它在 angular ui 模态中也可以正常工作。但是，我需要在Bootstrap Modal. 在我的演示 plunker 中，您会看到它在任何地方都能正常工作：

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

我该如何解决这个问题？

演示 Plunker

4

2 回答 2

1

可以使用简单的 CSS 解决方案来完成。只需要为模态添加这些 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  */ 
}

演示

于 2015-04-15T16:08:10.403 回答
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服务添加到控制器参数。

请参阅工作演示。

于 2015-04-13T17:41:09.597 回答