Невозможно отображать ui-сетку в ui-bootstrap modal windown

Question

[SOLVED] Я понял это. Проблема связана с модальным размером, если вы измените размер окна, будет отображаться сетка. Добавление директивы автоматического изменения размеров позволило решить проблему. Смотрите более подробную информацию в http://ui-grid.info/docs/#/tutorial/213_auto_resizing у меня сложилось впечатление, что есть какая-то конфликт между стилем GRID и самозагрузки стиля (CSS и DIVs структуры) ...

[Подлинные POTS]

Помощь хотел!

Я не могу показать ui-grid в модальном окне, которое генерируется ui-bootstrap. Появится модальное окно, но сетка не отображается. Я могу отображать другие сетки вне модального окна.

В принципе, он размещен в Plunker. Это то, что у меня есть:

index.html

<div ng-controller="TradeListController"> 
    <button type="button" ng-click="openBoardgamegeekSearchWindow()">Search Board Game in Modal Window</button> 
</div> 

компоненты/MtApp.js

var mtApp = angular.module('mtApp', ['ui.bootstrap', 'ui.grid']); 

var TradeListController = function($scope, $modal) { 
    //=== Modal Window : Boardgamegeek Search ===// 
    $scope.openBoardgamegeekSearchWindow = function() { 
    console.log("Opening boardgamegeek search in modal window."); 
    var modalWindow = $modal 
     .open({ 
     templateUrl: 'components/boardgamegeek/boardgamegeek-search.html', 
     controller: 'BoardgamegeekSearchController', 
     }); 
    modalWindow.result.then(function(modalReturn) { 
     console.log("Boardgamegeek search window returned: ", modalReturn); 
    }, function() { 
     console.log('Boardgamegeek search window returned dismissed.'); 
    }); 
    }; 

}; 

angular.module('mtApp').controller('TradeListController', TradeListController); 


var BoardgamegeekSearchController = function($scope, $modalInstance) { 
    //=== Properties ===// 
    $scope.boardGames = [{ 
    tradeListId: 666666666, 
    boardgamegeekId: 42533, 
    name: "QWERTY", 
    thumbnailURL: "http://cf.geekdo-images.com/images/pic485388_mt.jpg" 
    }]; 

    //=== Grid to render board games ===// 
    $scope.gridOptions = { 
    data: $scope.boardGames, 
    columnDefs: [{ 
     field: 'name', 
     name: 'Name' 
    }] 
    }; 

}; 

angular.module('mtApp').controller('BoardgamegeekSearchController', BoardgamegeekSearchController); 

компоненты/BoardGameGeek/BoardGameGeek-search.html

<div ui-grid="gridOptions"></div> 
gridOptions = {{gridOptions}} 

Answer 1

Я понял это. Проблема связана с модальным размером, если вы измените размер окна, будет отображаться сетка.

Добавление директивы автоматического изменения размера разрешило проблему. Смотрите более подробную информацию в http://ui-grid.info/docs/#/tutorial/213_auto_resizing

У меня сложилось впечатление, что есть какая-то конфликт между стилем GRID и самозагрузки стиля (CSS и DIVs структуры) ...

Answer 2

Эта ссылка может быть полезна, она охватывает основное руководство по миграции из ng-сетки в ui-сетку https://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/