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

Question

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

我把我能做的最简单的例子放在一起：
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);

如果您单击 "My Dialog" 按钮，会出现一个对话框，其中有 table 的区域，但它是空的。 "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);
        }

模态教程中提到 bootstrap 模态在初始渲染时似乎运行动画，这会导致网格在获得准确尺寸时出现问题。

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

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

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

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

Can't get ui-grid to work in bootbox custom dialog

angularjs

angular-ui-grid

bootbox