1

私はuib-tabset4つのタブを持っています:

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

少なくとも、サーバーを呼び出すサービスは次のとおりです。コントローラに関しては、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 つと最後の 2 つなど。

4

1 に答える 1

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に、あなたにa を与えます。grid

.grid {
    width: 980px !important;
}
于 2016-05-04T09:05:23.113 に答える