Removed hacking folder, distributed files

dist/ionic-angular.js

@@ -7,64 +7,302 @@ angular.module('ionic.ui.content', {})
     template: '<div class="content"></div>'
   }
 });
-;angular.module('ionic.ui.tabbar', {})
+;angular.module('ionic.ui', ['ngTouch'])
 
-.controller('TabBarCtrl', ['$scope', '$element', function($scope, $element) {
-  console.log('Tab controller');
-  var tabs = $scope.tabs = [];
-
-  
-  $scope.selectTab = function(index) {
-  };
-  $scope.beforeTabSelect = function(index) {
-  };
-  $scope.tabSelected = function(index) {
+.directive('content', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    scope: true,
+    template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}"></div>',
+    compile: function(element, attr, transclude, navCtrl) {
+      return function($scope, $element, $attr) {
+        $scope.hasHeader = attr.hasHeader;
       };
+    }
+  }
+})
 
-  this.addTab = function(tab) {
-    tabs.push(tab);
-  };
+.controller('NavCtrl', function($scope, $element, $compile) {
+  var _this = this;
 
-  this.getSelectedTabIndex = function() {
-    return $scope.selectedIndex;
-  };
 
-  this.selectTabAtIndex = function(index) {
-    $scope.selectedIndex = index;
-    console.log('Scope selected tab is', index);
-  };
+  angular.extend(this, NavController.prototype);
 
-  this.getNumTabs = function() {
-    return tabs.length;
-  };
-}])
+  NavController.call(this, {
+    content: {
+    },
+    navBar: {
+      shouldGoBack: function() {
+      },
+      setTitle: function(title) {
+        $scope.title = title;
+      },
+      showBackButton: function(show) {
+      },
+    }
+  });
 
-.directive('tabBar', function() {
+  $scope.controllers = this.controllers;
+
+  $scope.getTopController = function() {
+    return $scope.controllers[$scope.controllers.length-1];
+  }
+
+  $scope.pushController = function(controller) {
+    //console.log('PUSHING OCNTROLLER', controller);
+    _this.push(controller);
+  }
+
+  $scope.navController = this;
+})
+
+.directive('navController', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    controller: 'NavCtrl',
+    //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
+    template: '<div class="view"><div ng-transclude></div></div>',
+    compile: function(element, attr, transclude, navCtrl) {
+      return function($scope, $element, $attr) {
+      };
+    }
+  }
+})
+
+.directive('navBar', function() {
+  return {
+    restrict: 'E',
+    require: '^navController',
+    transclude: true,
+    replace: true,
+    template: '<header class="bar bar-header bar-dark nav-bar">' + 
+        '<a href="#" ng-click="goBack()" class="button" ng-if="controllers.length > 1">Back</a>' +
+        '<h1 class="title">{{getTopController().title}}</h1>' + 
+      '</header>',
+    link: function(scope, element, attrs, navCtrl) {
+      scope.goBack = function() {
+        navCtrl.pop();
+      }
+    }
+  }
+})
+
+.directive('navContent', function() {
+  return {
+    restrict: 'ECA',
+    scope: true,
+    link: function(scope, element, attrs) {
+      scope.title = attrs.title;
+      scope.isVisible = true;
+      scope.pushController(scope);
+    }
+  }
+});
+;angular.module('ionic.ui', [])
+
+.controller('SideMenuCtrl', function($scope) {
+  var _this = this;
+
+  angular.extend(this, SideMenuController.prototype);
+
+  SideMenuController.call(this, {
+    left: {
+      width: 270,
+      isEnabled: true,
+      pushDown: function() {
+        $scope.leftZIndex = -1;
+      },
+      bringUp: function() {
+        $scope.leftZIndex = 0;
+      }
+    },
+    right: {
+      width: 270,
+      isEnabled: true,
+      pushDown: function() {
+        $scope.rightZIndex = -1;
+      },
+      bringUp: function() {
+        $scope.rightZIndex = 0;
+      }
+    },
+    content: {
+      onDrag: function(e) {},
+      endDrag: function(e) {},
+      getTranslateX: function() {
+        /*
+        var r = /translate3d\((-?.+)px/;
+        var d = r.exec(this.el.style.webkitTransform);
+
+        if(d && d.length > 0) {
+          return parseFloat(d[1]);
+        }
+        */
+        return $scope.contentTranslateX || 0;
+      },
+      setTranslateX: function(amount) {
+        $scope.contentTranslateX = amount;
+        $scope.$apply();
+      },
+      enableAnimation: function() {
+        //this.el.classList.add(this.animateClass);
+        $scope.animationEnabled = true;
+      },
+      disableAnimation: function() {
+        //this.el.classList.remove(this.animateClass);
+        $scope.animationEnabled = false;
+      }
+    }
+  });
+
+  $scope.contentTranslateX = 0;
+})
+
+.directive('sideMenuController', function() {
+  return {
+    restrict: 'E',
+    controller: 'SideMenuCtrl',
+    replace: true,
+    transclude: true,
+    template: '<div class="view"><div ng-transclude></div></div>',
+  }
+})
+
+.directive('sideMenuContent', function() {
+  return {
+    restrict: 'CA',
+    require: '^sideMenuController',
+    compile: function(element, attr, transclude) {
+      return function($scope, $element, $attr, sideMenuCtrl) {
+        window.ionic.onGesture('drag', function(e) {
+          sideMenuCtrl._handleDrag(e);
+        }, $element[0]);
+
+        window.ionic.onGesture('release', function(e) {
+          sideMenuCtrl._endDrag(e);
+        }, $element[0]);
+
+        $scope.$watch('contentTranslateX', function(value) {
+          $element[0].style.webkitTransform = 'translate3d(' + value + 'px, 0, 0)';
+        });
+
+        $scope.$watch('animationEnabled', function(isAnimationEnabled) {
+          if(isAnimationEnabled) {
+            $element[0].classList.add('menu-animated');
+          } else {
+            $element[0].classList.remove('menu-animated');
+          }
+
+        });
+      };
+    }
+  }
+})
+
+
+.directive('menu', function() {
+  return {
+    restrict: 'E',
+    require: '^sideMenuController',
+    replace: true,
+    transclude: true,
+    scope: true,
+    template: '<div class="menu menu-{{side}}" ng-transclude></div>',
+    compile: function(element, attr, transclude, sideMenuCtrl) {
+      return function($scope, $element, $attr) {
+        $scope.side = attr.side;
+      };
+    }
+  }
+})
+;angular.module('ionic.ui', [])
+
+.directive('content', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    scope: {
+      hasHeader: '@',
+      hasTabs: '@'
+    },
+    template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}" ng-transclude></div>'
+  }
+})
+
+.controller('TabsCtrl', function($scope) {
+  var _this = this;
+
+  angular.extend(this, TabBarController.prototype);
+
+  TabBarController.call(this, {
+    tabBar: {
+      tryTabSelect: function() {},
+      setSelectedItem: function(index) {
+        console.log('TAB BAR SET SELECTED INDEX', index);
+      },
+      addItem: function(item) {
+        console.log('TAB BAR ADD ITEM', item);
+      }
+    }
+  });
+
+  $scope.controllers = this.controllers;
+
+  $scope.$watch('controllers', function(newV, oldV) {
+    console.log("CControlelrs changed", newV, oldV);
+    //$scope.$apply();
+  });
+})
+
+.directive('tabController', function() {
   return {
     restrict: 'E',
     replace: true,
     scope: {},
     transclude: true,
-    controller: 'TabBarCtrl',
+    controller: 'TabsCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
-    template: '<div class="view-wrapper" ng-transclude></div>',
+    template: '<div class="view"><div ng-transclude></div><tab-bar></tab-bar></div>',
+    compile: function(element, attr, transclude, tabsCtrl) {
+      return function($scope, $element, $attr) {
+      };
+    }
   }
 })
 
-.directive('tabs', function() {
+// Generic controller directive
+.directive('tabContent', function() {
+  return {
+    restrict: 'CA',
+    replace: true,
+    transclude: true,
+    template: '<div ng-show="isVisible" ng-transclude></div>',
+    require: '^tabController',
+    scope: true,
+    link: function(scope, element, attrs, tabsCtrl) {
+      scope.title = attrs.title;
+      scope.icon = attrs.icon;
+      tabsCtrl.addController(scope);
+    }
+  }
+})
+
+
+.directive('tabBar', function() {
   return {
     restrict: 'E',
-    replace: true,
-    require: '^tabBar',
+    require: '^tabController',
     transclude: true,
-    template: '<footer class="bar bar-tabs bar-footer bar-success">' + 
-  '<nav class="tabs">' + 
-    '<ul class="tabs-inner">' + 
-      '<tab-item text="Item" icon="icon-default" ng-repeat="tab in tabs">' + 
-      '</tab-item>' +
-    '</ul>' +
-  '</nav>' +
-'</footer>'
+    replace: true,
+    scope: true,
+    template: '<div class="tabs tabs-primary">' + 
+      '<tab-item title="{{controller.title}}" icon="{{controller.icon}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-item>' + 
+    '</div>'
   }
 })
 
@@ -72,42 +310,23 @@ angular.module('ionic.ui.content', {})
   return {
     restrict: 'E',
     replace: true,
-    require: '^tabBar',
+    require: '^tabController',
     scope: {
-      text: '@',
+      title: '@',
       icon: '@',
       active: '=',
       tabSelected: '@',
+      index: '='
     },
-    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;
-
+    link: function(scope, element, attrs, tabsCtrl) {
+      console.log('Linked item', scope);
       scope.selectTab = function(index) {
-        console.log('SELECT TAB', index);
-        tabBarCtrl.selectTabAtIndex(index);
+        tabsCtrl.selectController(scope.index);
       };
-      
-      tabBarCtrl.addTab(scope);
     },
-    template: '<li class="tab-item" ng-class="{active:active}">' + 
-        '<a href="#" ng-click="selectTab(tabIndex)">' + 
-          '<i class="{{icon}}"></i>' +
-          '{{text}}' +
-        '</a></li>'
+    template: 
+      '<a href="#" ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
+        '<i class="{{icon}}"></i> {{title}}' +
+      '</a>'
   }
 });
-

dist/ionic.js

@@ -2095,6 +2095,120 @@ ionic.controllers.NavController.prototype = {
 
 };
 })(window.ionic);
+;/**
+ * Adapted from Backbone.js
+ */
+(function(window, document, ionic) {
+  var optionalParam = /\((.*?)\)/g;
+  var namedParam    = /(\(\?)?:\w+/g;
+  var splatParam    = /\*\w+/g;
+  var escapeRegExp  = /[\-{}\[\]+?.,\\\^$|#\s]/g;
+
+  // Cached regex for stripping a leading hash/slash and trailing space.
+  var routeStripper = /^[#\/]|\s+$/g;
+
+  // Cached regex for stripping leading and trailing slashes.
+  var rootStripper = /^\/+|\/+$/g;
+
+  // Cached regex for removing a trailing slash.
+  var trailingSlash = /\/$/;
+
+  RouteViewController = function(options) {
+    this.options = options;
+
+    this.root = this.options.root || '/';
+    this.root = ('/' + this.root + '/').replace(rootStripper, '/');
+
+    this.handlers = [];
+
+    this._bindEvents();
+
+    this.location = window.location;
+    this.history = window.history;
+  };
+
+  RouteViewController.prototype = {
+    when: function(route, callback) {
+      var _this = this;
+
+      route = this._routeToRegExp(route);
+
+      this.handlers.unshift({
+        route: route,
+        callback: function(fragment)  {
+          var args = _this._extractParameters(route, fragment);
+          callback && callback.apply(_this, args);
+        }
+      });
+    },
+
+    // Convert a route string into a regular expression, suitable for matching
+    // against the current location hash.
+    _routeToRegExp: function(route) {
+      route = route.replace(escapeRegExp, '\\$&')
+                   .replace(optionalParam, '(?:$1)?')
+                   .replace(namedParam, function(match, optional){
+                     return optional ? match : '([^\/]+)';
+                   })
+                   .replace(splatParam, '(.*?)');
+      return new RegExp('^' + route + '$');
+    },
+
+    // Given a route, and a URL fragment that it matches, return the array of
+    // extracted decoded parameters. Empty or unmatched parameters will be
+    // treated as `null` to normalize cross-browser behavior.
+    _extractParameters: function(route, fragment) {
+      var params = route.exec(fragment).slice(1);
+      var extracted = [];
+      for(var i = 0; i < params.length; i++) {
+        if(param) {
+          extracted.push(decodeURIComponent(param));
+        }
+      }
+    },
+
+    _bindEvents: function() {
+      var _this = this;
+
+      window.addEventListener('popstate', function(event) {
+        _this.checkUrl(event);
+      });
+    },
+    checkUrl: function(e) {
+      var current = this.getFragment();
+      if (current === this.fragment) return false;
+      this.loadUrl() || this.loadUrl(this.getHash());
+    },
+    getFragment: function(fragment, forcePushState) {
+      if (fragment == null) {
+        fragment = this.location.pathname;
+        var root = this.root.replace(this.trailingSlash, '');
+        if (!fragment.indexOf(root)) fragment = fragment.substr(root.length);
+      }
+      return fragment.replace(routeStripper, '');
+    },
+    getHash: function(window) {
+      var match = (window || this).location.href.match(/#(.*)$/);
+      return match ? match[1] : '';
+    },
+
+    // Attempt to load the current URL fragment. If a route succeeds with a
+    // match, returns `true`. If no defined routes matches the fragment,
+    // returns `false`.
+    loadUrl: function(fragmentOverride) {
+      var fragment = this.fragment = this.getFragment(fragmentOverride);
+      var matched = false;
+      for(var i = 0; i < this.handlers.length; i++) {
+        var h = this.handlers[i];
+        if (h.route.test(fragment)) {
+          h.callback(fragment);
+          matched = true;
+        }
+      }
+      return matched;
+    },
+  };
+})(this, document, ion = this.ionic || {});
 ;
 (function(ionic) {
 

ext/angular/src/ionicTabBar.js

@@ -1,61 +1,87 @@
-angular.module('ionic.ui.tabbar', {})
+angular.module('ionic.ui', [])
 
-.controller('TabBarCtrl', ['$scope', '$element', function($scope, $element) {
-  console.log('Tab controller');
-  var tabs = $scope.tabs = [];
+.directive('content', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    scope: {
+      hasHeader: '@',
+      hasTabs: '@'
+    },
+    template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}" ng-transclude></div>'
+  }
+})
 
+.controller('TabsCtrl', function($scope) {
+  var _this = this;
 
-  $scope.selectTab = function(index) {
-  };
-  $scope.beforeTabSelect = function(index) {
-  };
-  $scope.tabSelected = function(index) {
-  };
+  angular.extend(this, TabBarController.prototype);
 
-  this.addTab = function(tab) {
-    tabs.push(tab);
-  };
+  TabBarController.call(this, {
+    tabBar: {
+      tryTabSelect: function() {},
+      setSelectedItem: function(index) {
+        console.log('TAB BAR SET SELECTED INDEX', index);
+      },
+      addItem: function(item) {
+        console.log('TAB BAR ADD ITEM', item);
+      }
+    }
+  });
 
-  this.getSelectedTabIndex = function() {
-    return $scope.selectedIndex;
-  };
+  $scope.controllers = this.controllers;
 
-  this.selectTabAtIndex = function(index) {
-    $scope.selectedIndex = index;
-    console.log('Scope selected tab is', index);
-  };
+  $scope.$watch('controllers', function(newV, oldV) {
+    console.log("CControlelrs changed", newV, oldV);
+    //$scope.$apply();
+  });
+})
 
-  this.getNumTabs = function() {
-    return tabs.length;
-  };
-}])
-
-.directive('tabBar', function() {
+.directive('tabController', function() {
   return {
     restrict: 'E',
     replace: true,
     scope: {},
     transclude: true,
-    controller: 'TabBarCtrl',
+    controller: 'TabsCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
-    template: '<div class="view-wrapper" ng-transclude></div>',
+    template: '<div class="view"><div ng-transclude></div><tab-bar></tab-bar></div>',
+    compile: function(element, attr, transclude, tabsCtrl) {
+      return function($scope, $element, $attr) {
+      };
+    }
   }
 })
 
-.directive('tabs', function() {
+// Generic controller directive
+.directive('tabContent', function() {
+  return {
+    restrict: 'CA',
+    replace: true,
+    transclude: true,
+    template: '<div ng-show="isVisible" ng-transclude></div>',
+    require: '^tabController',
+    scope: true,
+    link: function(scope, element, attrs, tabsCtrl) {
+      scope.title = attrs.title;
+      scope.icon = attrs.icon;
+      tabsCtrl.addController(scope);
+    }
+  }
+})
+
+
+.directive('tabBar', function() {
   return {
     restrict: 'E',
-    replace: true,
-    require: '^tabBar',
+    require: '^tabController',
     transclude: true,
-    template: '<footer class="bar bar-tabs bar-footer bar-success">' + 
-  '<nav class="tabs">' + 
-    '<ul class="tabs-inner">' + 
-      '<tab-item text="Item" icon="icon-default" ng-repeat="tab in tabs">' + 
-      '</tab-item>' +
-    '</ul>' +
-  '</nav>' +
-'</footer>'
+    replace: true,
+    scope: true,
+    template: '<div class="tabs tabs-primary">' + 
+      '<tab-item title="{{controller.title}}" icon="{{controller.icon}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-item>' + 
+    '</div>'
   }
 })
 
@@ -63,42 +89,23 @@ angular.module('ionic.ui.tabbar', {})
   return {
     restrict: 'E',
     replace: true,
-    require: '^tabBar',
+    require: '^tabController',
     scope: {
-      text: '@',
+      title: '@',
       icon: '@',
       active: '=',
       tabSelected: '@',
+      index: '='
     },
-    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;
-
+    link: function(scope, element, attrs, tabsCtrl) {
+      console.log('Linked item', scope);
       scope.selectTab = function(index) {
-        console.log('SELECT TAB', index);
-        tabBarCtrl.selectTabAtIndex(index);
+        tabsCtrl.selectController(scope.index);
       };
-      
-      tabBarCtrl.addTab(scope);
     },
-    template: '<li class="tab-item" ng-class="{active:active}">' + 
-        '<a href="#" ng-click="selectTab(tabIndex)">' + 
-          '<i class="{{icon}}"></i>' +
-          '{{text}}' +
-        '</a></li>'
+    template: 
+      '<a href="#" ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
+        '<i class="{{icon}}"></i> {{title}}' +
+      '</a>'
   }
 });
-

ext/angular/test/nav.html

@@ -47,8 +47,8 @@
       </content>
     </nav-controller>
 
-    <script src="NavController.js"></script>
-    <script src="NavAngular.js"></script>
+    <script src="../js/NavController.js"></script>
+    <script src="../js/NavAngular.js"></script>
     <script>
       var pageNumber = 0;
 

ext/angular/test/tabs.html

@@ -1,18 +1,69 @@
-<!DOCTYPE html>
-<html>
+<html ng-app="tabsTest">
   <head>
-    <link rel="stylesheet" href="/dist/ionic.css">
-    <script src="/vendor/angular/1.2.0rc1/angular-1.2.0rc1.min.js"></script>
-    <script src="/ext/angular/src/ionicContent.js"></script>
-    <script src="/ext/angular/src/ionicTabBar.js"></script>
+    <meta charset="utf-8">
+    <title>Tab Bars</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
+    <link rel="stylesheet" href="../dist/ionic.css">
+    <script src="/vendor/angular/1.2.0rc2/angular-1.2.0rc2.min.js"></script>
+    <script src="/vendor/angular/1.2.0rc2/angular-touch.js"></script>
+    <style>
+      .content {
+        height: 100%;
+      }
+    </style>
   </head>
-  <body ng-app="ionic.ui.tabbar">
-    <tab-bar>
-      <tabs>
-        <tab-item active="true" text="Cats" icon="icon-default" />
-        <tab-item active="true" text="Cats" icon="icon-default" />
-        <tab-item active="true" text="Cats" icon="icon-default" />
-      </tabs>
-    </tab-bar>
+  <body>
+    <tab-controller>
+      <div title="Home" icon="icon-home" class="tab-content">
+        <header class="bar bar-header bar-dark">
+          <h1 class="title">Tab Bars</h1>
+        </header>
+        <content has-header="true" has-tabs="true">
+          <h1>Home</h1>
+          <ul class="list" ng-controller="HomeCtrl">
+            <a href="#" class="list-item" ng-repeat="item in items">
+              {{item.title}}
+            </a>
+          </ul>
+        </content>
+      </div>
+
+      <div title="About" icon="icon-info" class="tab-content">
+        <header class="bar bar-header bar-success">
+          <h1 class="title">About</h1>
+        </header>
+        <content has-header="true" has-tabs="true">
+          <h1>About Us</h1>
+        </content>
+      </div>
+
+      <div title="Settings" icon="icon-gear" class="tab-content">
+        <header class="bar bar-header bar-dark">
+          <h1 class="title">Settings</h1>
+        </header>
+        <content has-header="true" has-tabs="true">
+          <h1>Settings</h1>
+        </content>
+      </div>
+    </tab-controller>
+
+    <script src="TabBarController.js"></script>
+    <script src="TabAngular.js"></script>
+    <script>
+      angular.module('tabsTest', ['ionic.ui'])
+
+      .controller('HomeCtrl', function($scope) {
+        $scope.items = [];
+        for(var i = 0; i < 100; i++) {
+          $scope.items.push({
+            title: 'Item ' + i
+          });
+        }
+      })
+
+    </script>
   </body>
 </html>

hacking/Button.js

@@ -1,7 +0,0 @@
-(function(window, document, ionic) {
-  ionic.Button = function(opts) {
-    this.el = opts.el;
-  };
-  ionic.Button.prototype = {
-  }
-})(this, document, ionic = this.ionic || {});

hacking/TabAngular.js

@@ -1,111 +0,0 @@
-angular.module('ionic.ui', ['ngTouch'])
-
-.directive('content', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    transclude: true,
-    scope: {
-      hasHeader: '@',
-      hasTabs: '@'
-    },
-    template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}" ng-transclude></div>'
-  }
-})
-
-.controller('TabsCtrl', function($scope) {
-  var _this = this;
-
-  angular.extend(this, TabBarController.prototype);
-
-  TabBarController.call(this, {
-    tabBar: {
-      tryTabSelect: function() {},
-      setSelectedItem: function(index) {
-        console.log('TAB BAR SET SELECTED INDEX', index);
-      },
-      addItem: function(item) {
-        console.log('TAB BAR ADD ITEM', item);
-      }
-    }
-  });
-
-  $scope.controllers = this.controllers;
-
-  $scope.$watch('controllers', function(newV, oldV) {
-    console.log("CControlelrs changed", newV, oldV);
-    //$scope.$apply();
-  });
-})
-
-.directive('tabController', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    scope: {},
-    transclude: true,
-    controller: 'TabsCtrl',
-    //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
-    template: '<div class="view"><div ng-transclude></div><tab-bar></tab-bar></div>',
-    compile: function(element, attr, transclude, tabsCtrl) {
-      return function($scope, $element, $attr) {
-      };
-    }
-  }
-})
-
-// Generic controller directive
-.directive('tabContent', function() {
-  return {
-    restrict: 'CA',
-    replace: true,
-    transclude: true,
-    template: '<div ng-show="isVisible" ng-transclude></div>',
-    require: '^tabController',
-    scope: true,
-    link: function(scope, element, attrs, tabsCtrl) {
-      scope.title = attrs.title;
-      scope.icon = attrs.icon;
-      tabsCtrl.addController(scope);
-    }
-  }
-})
-
-
-.directive('tabBar', function() {
-  return {
-    restrict: 'E',
-    require: '^tabController',
-    transclude: true,
-    replace: true,
-    scope: true,
-    template: '<div class="tabs tabs-primary">' + 
-      '<tab-item title="{{controller.title}}" icon="{{controller.icon}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-item>' + 
-    '</div>'
-  }
-})
-
-.directive('tabItem', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    require: '^tabController',
-    scope: {
-      title: '@',
-      icon: '@',
-      active: '=',
-      tabSelected: '@',
-      index: '='
-    },
-    link: function(scope, element, attrs, tabsCtrl) {
-      console.log('Linked item', scope);
-      scope.selectTab = function(index) {
-        tabsCtrl.selectController(scope.index);
-      };
-    },
-    template: 
-      '<a href="#" ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
-        '<i class="{{icon}}"></i> {{title}}' +
-      '</a>'
-  }
-});

hacking/TabBar.dataApi.unit.js

@@ -1,5 +0,0 @@
-describe('TabBar Data API', function() {
-  it('Should detect tabs', function() {
-
-  });
-});

hacking/tabsAngular.html

@@ -1,69 +0,0 @@
-<html ng-app="tabsTest">
-  <head>
-    <meta charset="utf-8">
-    <title>Tab Bars</title>
-
-    <!-- Sets initial viewport load and disables zooming  -->
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../dist/ionic.css">
-    <script src="/vendor/angular/1.2.0rc2/angular-1.2.0rc2.min.js"></script>
-    <script src="/vendor/angular/1.2.0rc2/angular-touch.js"></script>
-    <style>
-      .content {
-        height: 100%;
-      }
-    </style>
-  </head>
-  <body>
-    <tab-controller>
-      <div title="Home" icon="icon-home" class="tab-content">
-        <header class="bar bar-header bar-dark">
-          <h1 class="title">Tab Bars</h1>
-        </header>
-        <content has-header="true" has-tabs="true">
-          <h1>Home</h1>
-          <ul class="list" ng-controller="HomeCtrl">
-            <a href="#" class="list-item" ng-repeat="item in items">
-              {{item.title}}
-            </a>
-          </ul>
-        </content>
-      </div>
-
-      <div title="About" icon="icon-info" class="tab-content">
-        <header class="bar bar-header bar-success">
-          <h1 class="title">About</h1>
-        </header>
-        <content has-header="true" has-tabs="true">
-          <h1>About Us</h1>
-        </content>
-      </div>
-
-      <div title="Settings" icon="icon-gear" class="tab-content">
-        <header class="bar bar-header bar-dark">
-          <h1 class="title">Settings</h1>
-        </header>
-        <content has-header="true" has-tabs="true">
-          <h1>Settings</h1>
-        </content>
-      </div>
-    </tab-controller>
-
-    <script src="TabBarController.js"></script>
-    <script src="TabAngular.js"></script>
-    <script>
-      angular.module('tabsTest', ['ionic.ui'])
-
-      .controller('HomeCtrl', function($scope) {
-        $scope.items = [];
-        for(var i = 0; i < 100; i++) {
-          $scope.items.push({
-            title: 'Item ' + i
-          });
-        }
-      })
-
-    </script>
-  </body>
-</html>

test/controllers/tabBar.html

@@ -0,0 +1,109 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Tab Bars</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../dist/ionic.css">
+  </head>
+  <body>
+
+    <section>
+
+      <header class="bar bar-header bar-dark">
+        <h1 class="title">Tab Bars</h1>
+      </header>
+
+      <main class="has-header content">
+        <div id="tab1">
+          <h2>Tab 1</h2>
+          <p>
+            Friends
+          </p>
+        </div>
+        <div id="tab2">
+          <h2>Tab 2</h2>
+          <p>
+            Friends
+          </p>
+        </div>
+        <div id="tab3">
+          <h2>Tab 3</h2>
+          <p>
+            Friends
+          </p>
+        </div>
+        <div id="tab4">
+          <h2>Tab 4</h2>
+          <p>
+            Friends
+          </p>
+        </div>
+      </main>
+      <nav id="tab-bar" class="tabs tabs-success"></nav>
+    </section>
+
+    <script src="../../dist/ionic.js"></script>
+    <script>
+      // Grab the sections
+      var tab = document.getElementById('tab-bar');
+
+      var tab1 = document.getElementById('tab1');
+      var tab2 = document.getElementById('tab2');
+      var tab3 = document.getElementById('tab3');
+      var tab4 = document.getElementById('tab4');
+
+      var controller = function(opts) {
+        this.el = opts.el;
+      }
+      controller.prototype = {
+        visibilityChanged: function() {
+          if(this.isVisible) {
+            //this.el.style.display = 'block';
+            if(this._lastNodeSpot) {
+              this._lastNodeParent.insertBefore(this.el, this._lastNodeSpot);
+            }
+          } else {
+            //this.el.style.display = 'none';
+            var parentNode = this.el.parentNode;
+            if(!parentNode) {
+              return;
+            }
+            var next = this.el.nextSibling;
+            this._lastNodeSpot = next;
+            this._lastNodeParent = parentNode;
+            parentNode.removeChild(this.el);
+          }
+        },
+      };
+
+      var c1 = new controller({
+        el: tab1
+      });
+      c1.title = 'Mice';
+      c1.icon = 'icon-home';
+      var c2 = new controller({
+        el: tab2
+      });
+      c2.title = 'Dogs';
+      c2.icon = 'icon-gear';
+      var c3 = new controller({
+        el: tab3
+      });
+      c3.title = 'Cats';
+      c3.icon = 'icon-plus';
+      var c4 = new controller({
+        el: tab4
+      });
+      c4.title = 'Cats';
+      c4.icon = 'icon-minus';
+
+      var c = new ionic.controllers.TabBarController({
+        tabBar: new ionic.views.TabBar({ el: tab }),
+        controllers: [ c1, c2, c3, c4 ]
+      });
+    </script>
+  </body>
+</html>