From ed5cb0ca5fd42504a70a4fc0c6c3beb1446052bf Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Thu, 19 Sep 2013 15:58:03 -0500
Subject: [PATCH] Fixed tabs angular demo and made it better

---
 hacking/TabAngular.js    | 28 ++++++++++++----------------
 hacking/navAngular.html  | 32 ++++++++++++++++++++++++++++++--
 hacking/tabsAngular.html | 16 ++++++++--------
 3 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/hacking/TabAngular.js b/hacking/TabAngular.js
index 3b4ce48629..e0a7765401 100644
--- a/hacking/TabAngular.js
+++ b/hacking/TabAngular.js
@@ -34,11 +34,11 @@ angular.module('ionic.ui', ['ngTouch'])
 
   $scope.$watch('controllers', function(newV, oldV) {
     console.log("CControlelrs changed", newV, oldV);
-    $scope.$apply();
+    //$scope.$apply();
   });
 })
 
-.directive('tabs', function() {
+.directive('tabController', function() {
   return {
     restrict: 'E',
     replace: true,
@@ -55,17 +55,17 @@ angular.module('ionic.ui', ['ngTouch'])
 })
 
 // Generic controller directive
-.directive('tabController', function() {
+.directive('tabContent', function() {
   return {
-    restrict: 'E',
+    restrict: 'CA',
     replace: true,
     transclude: true,
     template: '<div ng-show="isVisible" ng-transclude></div>',
-    require: '^tabs',
-    scope: {
-      title: '@'
-    },
+    require: '^tabController',
+    scope: true,
     link: function(scope, element, attrs, tabsCtrl) {
+      scope.title = attrs.title;
+      scope.icon = attrs.icon;
       tabsCtrl.addController(scope);
     }
   }
@@ -75,9 +75,10 @@ angular.module('ionic.ui', ['ngTouch'])
 .directive('tabBar', function() {
   return {
     restrict: 'E',
-    require: '^tabs',
+    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>'
@@ -88,7 +89,7 @@ angular.module('ionic.ui', ['ngTouch'])
   return {
     restrict: 'E',
     replace: true,
-    require: '^tabs',
+    require: '^tabController',
     scope: {
       title: '@',
       icon: '@',
@@ -97,15 +98,10 @@ angular.module('ionic.ui', ['ngTouch'])
       index: '='
     },
     link: function(scope, element, attrs, tabsCtrl) {
-      // Store the index of this list item, which
-      // specifies which tab item it is
-      //scope.tabIndex = element.index();
-
+      console.log('Linked item', scope);
       scope.selectTab = function(index) {
-        console.log('SELECT TAB', scope.index);
         tabsCtrl.selectController(scope.index);
       };
-      
     },
     template: 
       '<a href="#" ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
diff --git a/hacking/navAngular.html b/hacking/navAngular.html
index c3f32503ee..a33194b244 100644
--- a/hacking/navAngular.html
+++ b/hacking/navAngular.html
@@ -9,13 +9,41 @@
     <link rel="stylesheet" href="../dist/ionic.css">
     <script src="/vendor/angular/1.2.0rc2/angular.js"></script>
     <script src="/vendor/angular/1.2.0rc2/angular-touch.js"></script>
+    <script src="/vendor/angular/1.2.0rc2/angular-animate.js"></script>
+    <style>
+      .reveal-animation {
+        /*
+        -webkit-transform: translate3d(0%, 0, 0);
+                transform: translate3d(0%, 0, 0);
+
+       -webkit-transition: -webkit-transform 1s ease-in-out;
+               transition:         transform 1s ease-in-out;
+        */
+      }
+      .reveal-animation.ng-enter {
+        -webkit-transition: .2s ease-in-out all;
+        -webkit-transform:translate3d(100%,0,0) ;
+      }
+      .reveal-animation.ng-enter-active {
+        -webkit-transform:translate3d(0,0,0) ;
+      }
+      .reveal-animation.ng-leave {
+        -webkit-transition: .2s ease-in-out all;
+        -webkit-transform:translate3d(0%,0,0);
+      }
+      .reveal-animation.ng-leave-active {
+        -webkit-transition: .2s ease-in-out all;
+        -webkit-transform:translate3d(-100%,0,0);
+      }
+    </style>
+
   </head>
   <body>
 
     <nav-controller>
       <nav-bar></nav-bar>
 
-      <content has-header="true" ng-controller="AppCtrl">
+      <content has-header="true" ng-controller="AppCtrl" class="reveal-animation">
       </content>
     </nav-controller>
 
@@ -30,7 +58,7 @@
 
         pageNumber++;
 
-        var el = $compile('<div title="Home: ' + pageNumber + '" ng-controller="CatsCtrl" nav-content has-header="true" ng-show="isVisible">' +
+        var el = $compile('<div title="Home: ' + pageNumber + '" ng-controller="CatsCtrl" nav-content has-header="true" class="reveal-animation" ng-show="isVisible">' +
           '<h1>' + pageNumber + '</h1>' +
           '<a href="#" class="button button-success" ng-click="goNext()">Next</a>' +
           '</div>')(childScope, cb);
diff --git a/hacking/tabsAngular.html b/hacking/tabsAngular.html
index c79ade0ed6..0480ff7516 100644
--- a/hacking/tabsAngular.html
+++ b/hacking/tabsAngular.html
@@ -16,8 +16,8 @@
     </style>
   </head>
   <body>
-    <tabs>
-      <tab-controller title="Home">
+    <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>
@@ -29,26 +29,26 @@
             </a>
           </ul>
         </content>
-      </tab-controller>
+      </div>
 
-      <tab-controller title="About">
+      <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>
-      </tab-controller>
+      </div>
 
-      <tab-controller title="Settings">
+      <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>
-      </tab-controller>
-    </tabs>
+      </div>
+    </tab-controller>
 
     <script src="TabBarController.js"></script>
     <script src="TabAngular.js"></script>