我有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);
};
至少,这里是调用服务器的服务。至于Controller,连四个tab的Services都是一样的,只是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
有时它似乎也不会加载所有数据。因为例如我看到前两个选项卡填充了表格,但其他两个没有填充。或者前两个和最后一个,依此类推。