/**
* @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
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* @param {string=} delegate-handle The handle used to identify these tabs
* with {@link ionic.service:$ionicTabsDelegate}.
*/
/**
* @ngdoc demo
* @name ionTabs#navigation
* @module tabsAndNavigation
* @javascript
angular.module('tabsAndNavigation', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'home-tab': {
templateUrl: "facts.html"
}
}
})
.state('tabs.facts2', {
url: "/facts2",
views: {
'home-tab': {
templateUrl: "facts2.html"
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "about.html"
}
}
})
.state('tabs.navstack', {
url: "/navstack",
views: {
'about-tab': {
templateUrl: "nav-stack.html"
}
}
})
.state('tabs.contact', {
url: "/contact",
views: {
'contact-tab': {
templateUrl: "contact.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function ($scope) {
console.log('We have arrived at HomeTabCtrl.');
});
*
* @html
*/
IonicModule
.directive('ionTabs', [
'$ionicViewService',
'$ionicTabsDelegate',
function($ionicViewService, $ionicTabsDelegate) {
return {
restrict: 'E',
scope: true,
controller: '$ionicTabs',
compile: function(element, attr) {
element.addClass('view');
//We cannot use regular transclude here because it breaks element.data()
//inheritance on compile
var innerElement = jqLite('');
innerElement.append(element.contents());
element.append(innerElement);
return { pre: prelink };
function prelink($scope, $element, $attr, tabsCtrl) {
var deregisterInstance = $ionicTabsDelegate._registerInstance(
tabsCtrl, $attr.delegateHandle
);
$scope.$on('$destroy', deregisterInstance);
tabsCtrl.$scope = $scope;
tabsCtrl.$element = $element;
tabsCtrl.$tabsElement = jqLite($element[0].querySelector('.tabs'));
var el = $element[0];
$scope.$watch(function() { return el.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() {
delete $scope.$hasTabs;
delete $scope.$hasTabsTop;
});
}
}
};
}]);