Мой html код:
<ul class="nav nav-tabs">
<li ng-class="{active: isActiveTab(tab.id)}" ng-repeat="tab in tabs">
<a href="" ng-click="changeActiveTab(tab.id)" data-toggle="tab" ng-bind="tab.label"></a>
<div class="notify"><span>{{tab.count}}</span></div>
</li>
</ul>
<div class="tab-content csbi-body-bg" changeable-height>
<div class="tab-pane fade csbi-body-work" ng-class="{'in active': isActiveTab(tab.id)}" ng-repeat="tab in tabs"
ng-include="tab.templateUrl">
</div>
</div>
Controller Angularjs:
$scope.tabs = [
{ id: 'unregistered', label: 'Незарегистрированные', templateUrl: '/Angular/Templates/Directions/Unregistered.html', count: 7 },
{ id: 'fromTO', label: 'Зарегистрированные из ТО/ЛО', templateUrl: '/Angular/Templates/Directions/RegisteredFromTO.html', count: 8 },
{ id: 'fromPOO', label: 'Зарегистрированные от ПОО', templateUrl: '/Angular/Templates/Directions/RegisteredFromPOO.html', count: 9 },
{ id: 'unassigned', label: 'Неназначенные', templateUrl: '/Angular/Templates/Directions/Unassigned.html', count: 27 },
{ id: 'assigned', label: 'В работе', templateUrl: '/Angular/Templates/Directions/InProcess.html', count: 19 }
];
$scope.activeTab = $scope.tabs[0].id;
$scope.changeActiveTab = function (tab) {
$scope.activeTab = tab;
//do some work...
};
Проблема в том что все табы загружают контент одновременно, т.е. там выполняется загрузка данных из базы, и она отрабатывает 5 раз. Как сделать чтобы контент загружался только при клике на таб?
Любые предложения.
templateUrl
для элемента массиваtabs
при клике на таб, вchangeActiveTab
.