ionic-cordova-gulp-seed
Version:
Ionic & Cordova & Gulp seed with organized code, tests, bower support and some other stuff. Originated from ionic-angular-cordova-seed.
105 lines (97 loc) • 3.52 kB
JavaScript
/**
* @ngdoc directive
* @name ionTabs
* @module ionic
* @delegate ionic.service:$ionicTabsDelegate
* @restrict E
* @codepen KbrzJ
*
* @description
* Powers a multi-tabbed interface with a Tab Bar and a set of "pages" that can be tabbed
* through.
*
* Assign any [tabs class](/docs/components#tabs) or
* [animation class](/docs/components#animation) to the element to define
* its look and feel.
*
* See the {@link ionic.directive:ionTab} directive's documentation for more details on
* individual tabs.
*
* Note: do not place ion-tabs inside of an ion-content element; it has been known to cause a
* certain CSS bug.
*
* @usage
* ```html
* <ion-tabs class="tabs-positive tabs-icon-only">
*
* <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
* <!-- Tab 1 content -->
* </ion-tab>
*
* <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
* <!-- Tab 2 content -->
* </ion-tab>
*
* <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
* <!-- Tab 3 content -->
* </ion-tab>
*
* </ion-tabs>
* ```
*
* @param {string=} delegate-handle The handle used to identify these tabs
* with {@link ionic.service:$ionicTabsDelegate}.
*/
IonicModule
.directive('ionTabs', [
'$ionicTabsDelegate',
'$ionicConfig',
'$ionicHistory',
function($ionicTabsDelegate, $ionicConfig, $ionicHistory) {
return {
restrict: 'E',
scope: true,
controller: '$ionicTabs',
compile: function(tElement) {
//We cannot use regular transclude here because it breaks element.data()
//inheritance on compile
var innerElement = jqLite('<div class="tab-nav tabs">');
innerElement.append(tElement.contents());
tElement.append(innerElement)
.addClass('tabs-' + $ionicConfig.tabs.position() + ' tabs-' + $ionicConfig.tabs.style());
return { pre: prelink, post: postLink };
function prelink($scope, $element, $attr, tabsCtrl) {
var deregisterInstance = $ionicTabsDelegate._registerInstance(
tabsCtrl, $attr.delegateHandle, tabsCtrl.hasActiveScope
);
tabsCtrl.$scope = $scope;
tabsCtrl.$element = $element;
tabsCtrl.$tabsElement = jqLite($element[0].querySelector('.tabs'));
$scope.$watch(function() { return $element[0].className; }, function(value) {
var isTabsTop = value.indexOf('tabs-top') !== -1;
var isHidden = value.indexOf('tabs-item-hide') !== -1;
$scope.$hasTabs = !isTabsTop && !isHidden;
$scope.$hasTabsTop = isTabsTop && !isHidden;
});
$scope.$on('$destroy', function() {
// variable to inform child tabs that they're all being blown away
// used so that while destorying an individual tab, each one
// doesn't select the next tab as the active one, which causes unnecessary
// loading of tab views when each will eventually all go away anyway
$scope.$tabsDestroy = true;
deregisterInstance();
tabsCtrl.$tabsElement = tabsCtrl.$element = tabsCtrl.$scope = innerElement = null;
delete $scope.$hasTabs;
delete $scope.$hasTabsTop;
});
}
function postLink($scope, $element, $attr, tabsCtrl) {
if (!tabsCtrl.selectedTab()) {
// all the tabs have been added
// but one hasn't been selected yet
tabsCtrl.select(0);
}
}
}
};
}]);