无法让 ui-grid 在引导箱自定义对话框中工作

Question

我在一个项目中使用 AngularJS、UI-Grid (http://ui-grid.info/) 和 Bootbox。我想做的是让用户点击屏幕上的一个按钮，然后弹出一个对话框，他们从 UI-Grid 表中选择一个项目。

我把我能做的最简单的例子放在一起：
http://plnkr.co/edit/YvsiAQhUrNqnSse1O0oh?p=preview

在此，我生成这样的对话框 HTML：

var tplCrop = '<div ng-controller="MyTableDialogCtrl">{{ someText }}' +
        '<div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>' +
        '</div>';
var template = angular.element(tplCrop);
var linkFn = $compile(template);
var html= linkFn($scope);

如果您单击“我的对话框”按钮，则会出现一个对话框，并且该表有一个区域，但它是空的。 “someText”值证明我的 Angular $compile 正在做它应该做的事情。

如果您取消注释部分，您会看到 UI-Grid 机制似乎也正常工作。但是，出于某种原因，UI-Grid 不想在对话框内呈现。

有什么想法吗？我真的很难过。

谢谢， 约翰

Answer 1

http://plnkr.co/edit/bbNVgwoTRtHZp3cKcoiB?p=preview

        onRegisterApi: function( gridApi ) {
          $scope.gridApi = gridApi;
          $timeout( function() {
            $scope.gridApi.core.handleWindowResize();
          }, 1000);
        }

在模态教程中提到，引导模态似乎在初始渲染时运行动画，这会导致网格出现问题，无法获得准确的大小。

我注意到，当我打开 chrome 调试器时，在您的 plunker 中出现了网格 - 表明这是一种或另一种大小问题。

我可以通过使用 1s 的 $timeout 和一个 handleWindowResize 来让它显示在上面的 plunker 中。通常我可以在不到 1 秒的时间内逃脱，但在这种情况下，在 100 毫秒时它不起作用。

我不得不说，如果超时这么久，我会感到不舒服，因为不同的浏览器和设备的运行速度可能不同，所以你最终会得到一个断断续续的应用程序。但是，您可以考虑在窗口打开后的前 3 秒内每 100 毫秒运行一次 $interval .....这可能涵盖大多数情况。