无法在 ui-bootstrap 模式窗口中显示 ui-grid

Question

[已解决] 我想通了。该问题与模态大小有关，如果您调整 window 的大小，将显示网格。添加自动调整大小指令解决了这个问题。在 http://ui-grid.info/docs/#/tutorial/213_auto_resizing 查看更多详细信息我的印象是网格的样式和 bootstrap 样式（CSS 和 DIV 结构）之间存在某种冲突...

[原锅]

需要帮助！

我无法显示 ui-grid in a modal window generated by ui-bootstrap。出现模态 window 但未呈现网格。我能够在模态 window.

之外渲染其他网格

基本上来说，它是托管在Plunker。这是我的：

index.html

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

components/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);

components/boardgamegeek/boardgamegeek-search.html

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

Answer 1

这个 link 很有用，它涵盖了从 ng-grid 迁移到 ui-grid https://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/

的基本 guide

Answer 2

我想通了。该问题与模态大小有关，如果您调整 window 的大小，将显示网格。

添加自动调整大小指令解决了这个问题。在 http://ui-grid.info/docs/#/tutorial/213_auto_resizing

查看更多详细信息

我的印象是网格的样式与 bootstrap 样式（CSS 和 DIV 结构）之间存在某种冲突...

无法在 ui-bootstrap 模式窗口中显示 ui-grid

Not able to display ui-grid in ui-bootstrap modal windown

twitter-bootstrap

angularjs

angular-ui-grid