/
tabs.js
84 lines (78 loc) · 2.58 KB
/
tabs.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/**
* @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.
*
* @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', ['$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 = angular.element('<div class="tabs"></div>');
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 = angular.element($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;
});
}
}
};
}]);