问题
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
回答1:
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.
来源:https://stackoverflow.com/questions/29024437/cant-get-ui-grid-to-work-in-bootbox-custom-dialog