UIB-onglet contenant UI-GRID

Question

I ont un uib-tabset avec quatre onglets:

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

il a ce contrôleur:

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

Chaque patte a la même structure. Ils contiennent tous une interface utilisateur-GRID, et ne diffèrent que dans les données qu'ils contiennent:

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

Au moins, est ici le service qui appelle le serveur. Quant au contrôleur, même les services des quatre onglets sont les mêmes et ne diffèrent que dans l'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; 
}]); 

Mon problème est que, même si j'ajouté le blockUI dans chaque onglet, quand j'ouvre la page contenant le uib-tabset il semble parfois qu'il ne charge pas toutes les données. Parce que par exemple je vois les deux premiers onglets qui ont la table remplie, mais les deux autres ne sont pas peuplés. Ou les deux premiers et le dernier, et ainsi de suite.

Answer 1

Veuillez essayer comme indiqué ci-dessous.

app.js

Module Inject ui.grid.autoResize comme indiqué ci-dessous.

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

Html

Utilisez directive ui-grid-auto-resize comme indiqué ci-dessous.

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

css

Donnez un width pour votre grid comme indiqué ci-dessous.

.grid { 
    width: 980px !important; 
}