Angularjs jQCloud не отображается должным образом в Bootstrap Modal

Question

Я использую этот плагин angularjs для Word Cloud. Он отлично работает везде. Но он не отображается должным образом в Bootstrap Modal, хотя он отлично работает и в угловом ui modal. Но мне нужно работать на Bootstrap Modal. В моем демо plunker, вы увидите, что он прекрасно работает в любом месте:

Но в Bootstrap модальный, это выглядит следующим образом:

Как я могу решить эту проблему?

Demo Plunker

Answer 1

Это можно сделать с помощью простого решения 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

Answer 2

Это происходит из-за этого кода в 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> 

Изменить всплывающих разметку, чтобы показать облако некоторые свойство:

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

Первый ДИВ там в качестве заполнителя, чтобы показать пустое пространство а облако - рендеринг (это не так красиво, я согласен).

В контроллере создать showCloud() обратный вызов и добавить isCloudVisible свойства:

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

Обратите внимание, что я добавил $timeout службу аргументов контроллера.

Просмотреть работу Demo.