diff --git a/hacking/TabAngular.js b/hacking/TabAngular.js
new file mode 100644
index 0000000000..a24362fb18
--- /dev/null
+++ b/hacking/TabAngular.js
@@ -0,0 +1,117 @@
+angular.module('ionic.ui', [])
+
+.directive('content', function() {
+ return {
+ restrict: 'E',
+ replace: true,
+ transclude: true,
+ scope: {
+ hasHeader: '@',
+ hasTabs: '@'
+ },
+ template: ''
+ }
+})
+
+.controller('TabsCtrl', function($scope) {
+ // Controller stuff goes here
+ $scope.items = [];
+
+ this.addItem = function(item) {
+ console.log('Adding item', item);
+ $scope.items.push({
+ title: item.title
+ });
+ };
+})
+
+.directive('tabs', function() {
+ return {
+ restrict: 'E',
+ replace: true,
+ scope: {},
+ transclude: true,
+ controller: 'TabsCtrl',
+ //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
+ template: '',
+ compile: function(element, attr, transclude, tabsCtrl) {
+ return function($scope, $element, $attr) {
+ };
+ }
+ }
+})
+
+// Generic controller directive
+.directive('tabController', function() {
+ return {
+ restrict: 'E',
+ replace: true,
+ transclude: true,
+ template: '',
+ require: '^tabs',
+ scope: {
+ title: '@'
+ },
+ link: function(scope, element, attrs, tabsCtrl) {
+ tabsCtrl.addItem(scope);
+ }
+ }
+})
+
+
+.directive('tabBar', function() {
+ return {
+ restrict: 'E',
+ require: '^tabs',
+ transclude: true,
+ replace: true,
+ template: ''
+ }
+})
+
+.directive('tabItem', function() {
+ return {
+ restrict: 'E',
+ replace: true,
+ require: '^tabBar',
+ scope: {
+ text: '@',
+ icon: '@',
+ active: '=',
+ tabSelected: '@',
+ },
+ compile: function(element, attrs, transclude) {
+ return function(scope, element, attrs, tabBarCtrl) {
+ var getActive, setActive;
+
+ scope.$watch('active', function(active) {
+ console.log('ACTIVE CHANGED', active);
+ });
+ };
+ },
+ link: function(scope, element, attrs, tabBarCtrl) {
+
+ // Store the index of this list item, which
+ // specifies which tab item it is
+ scope.tabIndex = element.index();
+
+ scope.active = true;
+
+ scope.selectTab = function(index) {
+ console.log('SELECT TAB', index);
+ tabBarCtrl.selectTabAtIndex(index);
+ };
+
+ tabBarCtrl.addTab(scope);
+ },
+ template: '' +
+ '' +
+ '' +
+ '{{text}}' +
+ ''
+ }
+});
diff --git a/hacking/tabsAngular.html b/hacking/tabsAngular.html
new file mode 100644
index 0000000000..e0b997e487
--- /dev/null
+++ b/hacking/tabsAngular.html
@@ -0,0 +1,55 @@
+
+
+
+ Tab Bars
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+
+ About Us
+
+
+
+
+
+ Settings
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss
index fa335af69d..9b851318ea 100644
--- a/scss/ionic/_bar.scss
+++ b/scss/ionic/_bar.scss
@@ -189,12 +189,3 @@
display: block;
}
-/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
- Note: For these to work, content must come after both bars in the markup */
-.has-header {
- top: $bar-height;
-}
-
-.has-footer {
- bottom: $bar-height;
-}
diff --git a/scss/ionic/_base.scss b/scss/ionic/_base.scss
index 96e57b6b49..187e80d513 100644
--- a/scss/ionic/_base.scss
+++ b/scss/ionic/_base.scss
@@ -29,6 +29,9 @@ body {
}
.view {
+ position: fixed;
+ top: 0;
+ left: 0;
width: 100%;
height: 100%;
}
@@ -53,6 +56,21 @@ body {
padding: $content-padding;
}
+// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
+// Note: For these to work, content must come after both bars in the markup
+.has-header {
+ top: $bar-height;
+}
+
+.has-footer {
+ bottom: $bar-height;
+}
+
+// Specify that a content area will have tabs
+.has-tabs {
+ bottom: $tabs-height;
+}
+
.inset {
margin: $inset-margin;
}
diff --git a/scss/ionic/_tabs.scss b/scss/ionic/_tabs.scss
index 5c25ab809a..6c33bee02f 100644
--- a/scss/ionic/_tabs.scss
+++ b/scss/ionic/_tabs.scss
@@ -98,3 +98,4 @@
font-weight: bold;
font-size: 10px;
}
+