UIBタブ含有UI-GRID

Question

私はuib-tabset 4とタブを有します。それらはすべてUI-GRIDを含み、含まれるデータだけが異なります。

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

少なくとも、ここではサーバーを呼び出すサービスがあります。コントローラについては、4つのタブのも、サービスは同じであり、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; 
}]); 

マイ問題は、私が各タブにblockUIを追加した場合でも、ということですuib-tabsetを含むページには、すべてのデータが読み込まれないことがあります。たとえば、最初の2つのタブが表示されているテーブルが表示されますが、他の2つのタブは表示されないためです。または最初の2つと最後の、など。

Answer 1

次のようにしてください。

app.js

以下に示すようui.grid.autoResizeモジュールを注入。

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

Htmlの

以下に示すようにui-grid-auto-resizeディレクティブを使用してください。

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

CSS

以下に示すように、あなたのgridためwidthを与えます。

.grid { 
    width: 980px !important; 
}