无法让 ui-grid 在 bootbox 自定义对话框中工作 [英] Can't get ui-grid to work in bootbox custom dialog

问题描述

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

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

在这里，我像这样生成对话框 HTML:

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

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

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

有什么想法吗?我真的被难住了.

谢谢，约翰

解决方案

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

 onRegisterApi: function( gridApi ) {$scope.gridApi = gridApi;$超时(函数(){$scope.gridApi.core.handleWindowResize();}, 1000);}

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

我注意到，当我打开 chrome 调试器时，在您的 plunker 中，网格显示出来 - 表明这是一种或另一种尺寸问题.

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

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

I'm using AngularJS, UI-Grid (http://ui-grid.info/), and Bootbox for a project. What I'd like to do is have the user click a button on the screen, and bring up a dialog box where they select an item from a UI-Grid table.

I put together the simplest example I could make:
http://plnkr.co/edit/YvsiAQhUrNqnSse1O0oh?p=preview

In this, I generate the dialog box HTML like this:

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

If you click the "My Dialog" button, a dialog comes up, and there is a region for the table, but it's empty. The "someText" value proves my Angular $compile is doing what it should.

If you uncomment the commented section, you'll see that the UI-Grid mechanics also seem to be working properly. But, for some reason, the UI-Grid doesn't want to render inside the dialog.

Any ideas? I'm really stumped.

Thanks, John

解决方案

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

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

In the modal tutorial it mentions that the bootstrap modals seem to run animations on initial render, and that this causes the grid problems with getting an accurate size.

I noted that in your plunker when I open the chrome debugger the grid shows up - indicating that it's a sizing issue of one sort or another.

I can get it to show in the above plunker by using a $timeout of 1s, and a handleWindowResize. Usually I can get away with a lot less than 1s, but in this case at 100ms it didn't work.

I'd have to say I'd be uncomfortable with a timeout this long, as it may turn out that different browsers and devices run different speeds, so you'll end up with an intermittent app. You could however consider a $interval that runs every 100ms for the first 3 seconds after window open.....that probably would cover most situations.

这篇关于无法让 ui-grid 在 bootbox 自定义对话框中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！