UiB-Register enthält UI-GRID

Question

Ich habe ein uib-tabset mit vier Register:

<uib-tabset active="activeForm"> 
    <uib-tab index="0" heading="One"><ng-include src="'one.html'"></ng-include></uib-tab> 
    <uib-tab index="1" heading="Two"><ng-include src="'two.html'"></ng-include></uib-tab> 
    <uib-tab index="2" heading="Three"><ng-include src="'three.html'"></ng-include></uib-tab> 
    <uib-tab index="3" heading="Four"><ng-include src="'four.html'"></ng-include></uib-tab> 
</uib-tabset> 

es diesen Controller aufweist:

$scope.tabs = [ 
    { title: 'One', route: 'one' }, 
    { title: 'Two', route: 'two' }, 
    { title: 'Three', route: 'three' }, 
    { title: 'Four', route: 'four' } 
]; 

$scope.go = function(route) { 
    $state.go(route); 
}; 

Jedes Register die gleiche Struktur hat. Sie alle enthalten einen UI-GRID und unterscheiden sich nur in den Daten, die sie enthalten:

$scope.dataList = []; 
$scope.selectedFile = null; 

$scope.gridOpts = { 
enableFiltering: true, 
enableRowSelection: true, 
enableRowHeaderSelection: false, 
multiSelect: false, 
modifierKeysToMultiSelect: false, 
noUnselect: false, 
columnDefs: [..my fields..], 
onRegisterApi: function(gridApi) { 
    //set gridApi on scope 
    $scope.gridApi = gridApi; 
    gridApi.selection.on.rowSelectionChanged($scope,function(row){ 
    $scope.selectedFile = row.entity; 
    // Switcher selezione/deselezione 
    if ($scope.atLeastOneIsSelected === false){ 
     $scope.atLeastOneIsSelected = true; 
    } else { 
     $scope.atLeastOneIsSelected = false; 
    } 
    }); 

    gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){ 
    $scope.atLeastOneIsSelected = false; 
    }); 

    $scope.getFirstData(); 
    } 
}; 

$scope.addGridData = function(datalist) { 
    $scope.dataList = $scope.dataList.concat(datalist); 
    $scope.gridOpts.data = $scope.dataList; 
}; 

$scope.getMoreDataAsync = function(firstData) { 
    if ($scope.cancelPromise) { 
    $scope.cancelPromise.resolve(); 
    } 
    $scope.cancelPromise = $q.defer(); 
    TypeOneFileSrv.fileList.get(
    { 
     userId: $scope.$stateParams.userId 
    }, function(data) { 
     if (data) { 
     $scope.addGridData(data); 
     blockUI.stop(); 
     } 
    }, function(error) { 
     if (error) { 
     toaster.pop('error', 'Error', error); 
     } 
    } 
); 
}; 

$scope.getFirstData = function() { 
    blockUI.start('Loading 'ONE' tab...'); 
    $scope.selectedFile = null; 
    $scope.dataList.length = 0; 
    $scope.getMoreDataAsync(true); 
}; 

Zumindest hier ist der Service, der den Server aufruft. Wie für den Controller, auch die Leistungen der vier Register sind gleich und unterscheiden sich nur in der URL:

angular.module('app').factory('TypeOneFileSrv', ['$resource', function($resource) { 
var typeOne = { 
    fileList: $resource('url_for_the_first_tab/:userId/?', { 
    userId: '@userId' 
    }, { 
    get: { 
     method: 'GET', 
     isArray: true 
    } 
    }) 
}; 
return typeOne; 
}]); 

Mein Problem ist, dass, selbst wenn ich die blockUI in jedem Register hinzugefügt, wenn ich das öffnen Seite mit der uib-tabset scheint es manchmal nicht alle Daten geladen. Zum Beispiel sehe ich die ersten beiden Registerkarten, auf denen die Tabelle aufgefüllt ist, aber die anderen beiden sind nicht ausgefüllt. Oder die ersten beiden und die letzten und so weiter.

Answer 1

Bitte versuchen Sie es wie unten gezeigt.

app.js

Injekt ui.grid.autoResize Modul wie unten gezeigt.

var appModule = angular.module("app", [ 
    'ui.grid.autoResize' 
]); 

Html

Verwendung ui-grid-auto-resize Richtlinie wie unten gezeigt.

<div class="grid" ui-grid="vm.yourGridOptions" ui-grid-auto-resize></div> 

css

eine width für Ihre grid Geben Sie wie unten gezeigt.

.grid { 
    width: 980px !important; 
}