Uib-вкладка, содержащая UI-GRID

Question

У меня есть uib-tabset с четырьмя вкладками:

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

у него есть этот контроллер:

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

Каждая вкладка имеет одинаковую структуру. Все они содержат 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);
};

По крайней мере, вот Служба, которая вызывает сервер. Что касается Контроллера, даже Сервисы четырех вкладок одинаковы и отличаются только по 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 иногда кажется, что он не загружает все данные. Потому что, например, я вижу первые две вкладки с заполненной таблицей, а две другие не заполнены. Или первые два и последний, и так далее.

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

Дать width для тебя grid как показано ниже.

.grid {
    width: 980px !important;
}