Getting close

dist/css/ionic.css

@@ -3213,7 +3213,6 @@ a.button {
 .nav-title-slide-ios7 > .ng-enter, .nav-title-slide-ios7.ng-enter, .nav-title-slide-ios7 > .ng-leave, .nav-title-slide-ios7.ng-leave {
   -webkit-transition: all 250ms;
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
   transition: all 250ms;
   transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
   opacity: 1; }
@@ -3230,7 +3229,6 @@ a.button {
 .reverse .nav-title-slide-ios7 > .ng-enter, .reverse .nav-title-slide-ios7.ng-enter, .reverse .nav-title-slide-ios7 > .ng-leave, .reverse .nav-title-slide-ios7.ng-leave {
   -webkit-transition: all 250ms;
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
   transition: all 250ms;
   transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
   opacity: 1; }

dist/js/ionic-angular.js

@@ -25296,11 +25296,6 @@ angular.module('ionic.ui.navRouter', [])
       this.navBar = {
         isVisible: true
       };
-
-      this.setTitle = function(value) {
-        $scope.$broadcast('navRouter.titleChanged', value);
-      };
-
       $scope.navController = this;
     }],
 
@@ -25316,24 +25311,20 @@ angular.module('ionic.ui.navRouter', [])
       };
 
       var reverseTransition = function() {
-        console.log('REVERSE');
         $element.removeClass('noop-animation');
         $element.addClass($scope.animation);
         $element.addClass('reverse');
       };
 
       var forwardTransition = function() {
-        console.log('FORWARD');
         $element.removeClass('noop-animation');
         $element.removeClass('reverse');
         $element.addClass($scope.animation);
       };
 
       $scope.$on('$routeChangeSuccess', function(e, a) {
-        console.log('ROUTE CHANGED', a, e);
       });
       $scope.$on('$routeChangeStart', function(e, next, current) {
-        console.log('ROUTE START', e, next, current);
         var back, historyState = $window.history.state;
 
         back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
@@ -25352,7 +25343,6 @@ angular.module('ionic.ui.navRouter', [])
 
       $scope.$on('$locationChangeSuccess', function(a, b, c) {
         // Store the new location
-        console.log('LOCATION CHANGE SUCCESS', a, b, c);
         $rootScope.actualLocation = $location.path();
         if(isFirst) {
           isFirst = false;
@@ -25399,9 +25389,10 @@ angular.module('ionic.ui.navRouter', [])
  * Our Nav Bar directive which updates as the controller state changes.
  */
 .directive('navBar', ['$rootScope', '$animate', '$compile', function($rootScope, $animate, $compile) {
-  var animate = function($scope, $element, oldTitle, newTitle, cb) {
+  var animate = function($scope, $element, oldTitle, data, cb) {
     var title, nTitle, oTitle, titles = $element[0].querySelectorAll('.title');
 
+    var newTitle = data.title;
     if(!oldTitle || oldTitle === newTitle) {
       cb();
       return;
@@ -25414,11 +25405,15 @@ angular.module('ionic.ui.navRouter', [])
 
     var insert = $element[0].firstElementChild || null;
 
-    $animate.enter(nTitle, $element, insert || angular.element(insert), function() {
+    $animate.enter(nTitle, $element, insert && angular.element(insert), function() {
       cb();
     });
     $animate.leave(angular.element(oTitle), function() {
     });
+
+    $scope.$on('navRouter.rightButtonsChanged', function(e, buttons) {
+      console.log('Buttons changing for nav bar', buttons);
+    });
   };
 
   return {
@@ -25433,15 +25428,21 @@ angular.module('ionic.ui.navRouter', [])
       alignTitle: '@',
     },
     template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
-        '<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+        '<div class="buttons"> ' +
+          '<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+          '<button ng-repeat="button in leftButtons" class="button" ng-bind="button.text"></button>' + 
+        '</div>' +
         '<h1 class="title" ng-bind="currentTitle"></h1>' + 
+        '<div class="buttons"> ' +
+          '<button ng-repeat="button in rightButtons" class="button" ng-bind="button.text"></button>' + 
+        '</div>' +
       '</header>',
     link: function($scope, $element, $attr, navCtrl) {
       var backButton;
+
+      // Create the back button content and show/hide it based on scope settings
       $scope.enableBackButton = true;
-
       $scope.backButtonContent = '';
-
       if($scope.backButtonIcon) {
         $scope.backButtonContent += '<i class="icon ' + $scope.backButtonIcon + '"></i>';
       }
@@ -25449,40 +25450,62 @@ angular.module('ionic.ui.navRouter', [])
         $scope.backButtonContent += ' ' + $scope.backButtonLabel
       }
 
+      // Listen for changes in the stack cursor position to indicate whether a back
+      // button should be shown (this can still be disabled by the $scope.enableBackButton
       $rootScope.$watch('stackCursorPosition', function(value) {
         if(value > 0) {
           $scope.showBackButton = true;
         } else {
           $scope.showBackButton = false;
         }
-        console.log('Stack cursor change', value);
       });
 
+      // Store a reference to our nav controller
       $scope.navController = navCtrl;
 
-      $scope.goBack = function() {
-        navCtrl.popController();
-      };
-
-
+      // Initialize our header bar view which will handle resizing and aligning our title labels
       var hb = new ionic.views.HeaderBar({
         el: $element[0],
         alignTitle: $scope.alignTitle || 'center'
       });
-
-      $element.addClass($scope.type);
-
       $scope.headerBarView = hb;
 
-      $scope.$parent.$on('navRouter.titleChanged', function(e, value) {
-        console.log(value);
-        console.log('Title changing from', $scope.currentTitle, 'to', value);
+      // Add the type of header bar class to this element
+      $element.addClass($scope.type);
+
+      var updateHeaderData = function(data) {
+        console.log('Header data changed', data);
+
         var oldTitle = $scope.currentTitle;
         $scope.oldTitle = oldTitle;
-        $scope.currentTitle = value;
-        animate($scope, $element, oldTitle, value, function() {
+        $scope.currentTitle = data.title;
+
+        if(typeof data.leftButtons !== 'undefined') {
+          $scope.leftButtons = data.leftButtons;
+        }
+        if(typeof data.rightButtons !== 'undefined') {
+          $scope.rightButtons = data.rightButtons;
+        }
+        if(typeof data.hideBackButton !== 'undefined') {
+          $scope.enableBackButton = data.hideBackButton !== true;
+        }
+
+        if(data.animate !== false) {
+          animate($scope, $element, oldTitle, data, function() {
+            hb.align();
+          });
+        } else {
           hb.align();
-        });
+        }
+      };
+
+      // Listen for changes on title change, and update the title
+      $scope.$parent.$on('navRouter.pageChanged', function(e, data) {
+        updateHeaderData(data);
+      });
+
+      $scope.$parent.$on('navRouter.pageShown', function(e, data) {
+        updateHeaderData(data);
       });
 
 
@@ -25512,12 +25535,43 @@ angular.module('ionic.ui.navRouter', [])
     link: function($scope, $element, $attr, navCtrl) {
       $element.addClass('pane');
 
-      var titleGet = $parse($attr.title);
+      $scope.icon = $attr.icon;
+      $scope.iconOn = $attr.iconOn;
+      $scope.iconOff = $attr.iconOff;
 
+      // Should we hide a back button when this tab is shown
+      $scope.hideBackButton = $scope.$eval($attr.hideBackButton);
+
+      // Whether we should animate on tab change, also impacts whether we
+      // tell any parent nav controller to animate
+      $scope.animate = $scope.$eval($attr.animate);
+
+      // Grab whether we should update any parent nav router on tab changes
+      $scope.doesUpdateNavRouter = $scope.$eval($attr.doesUpdateNavRouter) || true;
+
+      // watch for changes in the left buttons
+      var leftButtonsGet = $parse($attr.leftButtons);
+      $scope.$watch(leftButtonsGet, function(value) {
+        $scope.leftButtons = value;
+        if($scope.doesUpdateNavRouter) {
+          $scope.$emit('navRouter.leftButtonsChanged', $scope.rightButtons);
+        }
+      });
+
+      // watch for changes in the right buttons
+      var rightButtonsGet = $parse($attr.rightButtons);
+      $scope.$watch(rightButtonsGet, function(value) {
+        $scope.rightButtons = value;
+      });
+
+      // watch for changes in the title
+      var titleGet = $parse($attr.title);
       $scope.$watch(titleGet, function(value) {
-        console.log('Title changed');
         $scope.title = value;
-        navCtrl.setTitle(value);
+        $scope.$emit('navRouter.pageChanged', {
+          title: value,
+          animate: $scope.animate
+        });
       });
 
     }
@@ -25921,7 +25975,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
 })
 
 // Generic controller directive
-.directive('tab', ['$animate', function($animate) {
+.directive('tab', ['$animate', '$parse', function($animate, $parse) {
   return {
     restrict: 'E',
     replace: true,
@@ -25936,6 +25990,30 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
         $scope.icon = $attr.icon;
         $scope.iconOn = $attr.iconOn;
         $scope.iconOff = $attr.iconOff;
+
+        // Should we hide a back button when this tab is shown
+        $scope.hideBackButton = $scope.$eval($attr.hideBackButton);
+
+        // Whether we should animate on tab change, also impacts whether we
+        // tell any parent nav controller to animate
+        $scope.animate = $scope.$eval($attr.animate);
+
+        // Grab whether we should update any parent nav router on tab changes
+        $scope.doesUpdateNavRouter = $scope.$eval($attr.doesUpdateNavRouter) || true;
+
+        var leftButtonsGet = $parse($attr.leftButtons);
+        $scope.$watch(leftButtonsGet, function(value) {
+          $scope.leftButtons = value;
+          if($scope.doesUpdateNavRouter) {
+            $scope.$emit('navRouter.leftButtonsChanged', $scope.rightButtons);
+          }
+        });
+
+        var rightButtonsGet = $parse($attr.rightButtons);
+        $scope.$watch(rightButtonsGet, function(value) {
+          $scope.rightButtons = value;
+        });
+
         tabsCtrl.add($scope);
         
         $scope.$watch('isVisible', function(value) {
@@ -25955,6 +26033,19 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
               childElement.addClass('view-full');
               $animate.enter(clone, $element.parent(), $element);
 
+              if($scope.title) {
+                // Send the title up in case we are inside of a nav controller
+                if($scope.doesUpdateNavRouter) {
+                  $scope.$emit('navRouter.pageShown', {
+                    title: $scope.title,
+                    rightButtons: $scope.rightButtons,
+                    leftButtons: $scope.leftButtons,
+                    hideBackButton: $scope.hideBackButton || false,
+                    animate: $scope.animate || false
+                  });
+                }
+                //$scope.$emit('navRouter.titleChanged', $scope.title);
+              }
               $scope.$broadcast('tab.shown');
             });
           }

js/ext/angular/src/directive/ionicNavRouter.js

@@ -33,11 +33,6 @@ angular.module('ionic.ui.navRouter', [])
       this.navBar = {
         isVisible: true
       };
-
-      this.setTitle = function(value) {
-        $scope.$broadcast('navRouter.titleChanged', value);
-      };
-
       $scope.navController = this;
     }],
 
@@ -53,24 +48,20 @@ angular.module('ionic.ui.navRouter', [])
       };
 
       var reverseTransition = function() {
-        console.log('REVERSE');
         $element.removeClass('noop-animation');
         $element.addClass($scope.animation);
         $element.addClass('reverse');
       };
 
       var forwardTransition = function() {
-        console.log('FORWARD');
         $element.removeClass('noop-animation');
         $element.removeClass('reverse');
         $element.addClass($scope.animation);
       };
 
       $scope.$on('$routeChangeSuccess', function(e, a) {
-        console.log('ROUTE CHANGED', a, e);
       });
       $scope.$on('$routeChangeStart', function(e, next, current) {
-        console.log('ROUTE START', e, next, current);
         var back, historyState = $window.history.state;
 
         back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
@@ -89,7 +80,6 @@ angular.module('ionic.ui.navRouter', [])
 
       $scope.$on('$locationChangeSuccess', function(a, b, c) {
         // Store the new location
-        console.log('LOCATION CHANGE SUCCESS', a, b, c);
         $rootScope.actualLocation = $location.path();
         if(isFirst) {
           isFirst = false;
@@ -136,9 +126,10 @@ angular.module('ionic.ui.navRouter', [])
  * Our Nav Bar directive which updates as the controller state changes.
  */
 .directive('navBar', ['$rootScope', '$animate', '$compile', function($rootScope, $animate, $compile) {
-  var animate = function($scope, $element, oldTitle, newTitle, cb) {
+  var animate = function($scope, $element, oldTitle, data, cb) {
     var title, nTitle, oTitle, titles = $element[0].querySelectorAll('.title');
 
+    var newTitle = data.title;
     if(!oldTitle || oldTitle === newTitle) {
       cb();
       return;
@@ -151,11 +142,15 @@ angular.module('ionic.ui.navRouter', [])
 
     var insert = $element[0].firstElementChild || null;
 
-    $animate.enter(nTitle, $element, insert || angular.element(insert), function() {
+    $animate.enter(nTitle, $element, insert && angular.element(insert), function() {
       cb();
     });
     $animate.leave(angular.element(oTitle), function() {
     });
+
+    $scope.$on('navRouter.rightButtonsChanged', function(e, buttons) {
+      console.log('Buttons changing for nav bar', buttons);
+    });
   };
 
   return {
@@ -170,15 +165,21 @@ angular.module('ionic.ui.navRouter', [])
       alignTitle: '@',
     },
     template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
-        '<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+        '<div class="buttons"> ' +
+          '<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+          '<button ng-repeat="button in leftButtons" class="button" ng-bind="button.text"></button>' + 
+        '</div>' +
         '<h1 class="title" ng-bind="currentTitle"></h1>' + 
+        '<div class="buttons"> ' +
+          '<button ng-repeat="button in rightButtons" class="button" ng-bind="button.text"></button>' + 
+        '</div>' +
       '</header>',
     link: function($scope, $element, $attr, navCtrl) {
       var backButton;
+
+      // Create the back button content and show/hide it based on scope settings
       $scope.enableBackButton = true;
-
       $scope.backButtonContent = '';
-
       if($scope.backButtonIcon) {
         $scope.backButtonContent += '<i class="icon ' + $scope.backButtonIcon + '"></i>';
       }
@@ -186,40 +187,62 @@ angular.module('ionic.ui.navRouter', [])
         $scope.backButtonContent += ' ' + $scope.backButtonLabel
       }
 
+      // Listen for changes in the stack cursor position to indicate whether a back
+      // button should be shown (this can still be disabled by the $scope.enableBackButton
       $rootScope.$watch('stackCursorPosition', function(value) {
         if(value > 0) {
           $scope.showBackButton = true;
         } else {
           $scope.showBackButton = false;
         }
-        console.log('Stack cursor change', value);
       });
 
+      // Store a reference to our nav controller
       $scope.navController = navCtrl;
 
-      $scope.goBack = function() {
-        navCtrl.popController();
-      };
-
-
+      // Initialize our header bar view which will handle resizing and aligning our title labels
       var hb = new ionic.views.HeaderBar({
         el: $element[0],
         alignTitle: $scope.alignTitle || 'center'
       });
-
-      $element.addClass($scope.type);
-
       $scope.headerBarView = hb;
 
-      $scope.$parent.$on('navRouter.titleChanged', function(e, value) {
-        console.log(value);
-        console.log('Title changing from', $scope.currentTitle, 'to', value);
+      // Add the type of header bar class to this element
+      $element.addClass($scope.type);
+
+      var updateHeaderData = function(data) {
+        console.log('Header data changed', data);
+
         var oldTitle = $scope.currentTitle;
         $scope.oldTitle = oldTitle;
-        $scope.currentTitle = value;
-        animate($scope, $element, oldTitle, value, function() {
+        $scope.currentTitle = data.title;
+
+        if(typeof data.leftButtons !== 'undefined') {
+          $scope.leftButtons = data.leftButtons;
+        }
+        if(typeof data.rightButtons !== 'undefined') {
+          $scope.rightButtons = data.rightButtons;
+        }
+        if(typeof data.hideBackButton !== 'undefined') {
+          $scope.enableBackButton = data.hideBackButton !== true;
+        }
+
+        if(data.animate !== false) {
+          animate($scope, $element, oldTitle, data, function() {
+            hb.align();
+          });
+        } else {
           hb.align();
-        });
+        }
+      };
+
+      // Listen for changes on title change, and update the title
+      $scope.$parent.$on('navRouter.pageChanged', function(e, data) {
+        updateHeaderData(data);
+      });
+
+      $scope.$parent.$on('navRouter.pageShown', function(e, data) {
+        updateHeaderData(data);
       });
 
 
@@ -249,12 +272,43 @@ angular.module('ionic.ui.navRouter', [])
     link: function($scope, $element, $attr, navCtrl) {
       $element.addClass('pane');
 
-      var titleGet = $parse($attr.title);
+      $scope.icon = $attr.icon;
+      $scope.iconOn = $attr.iconOn;
+      $scope.iconOff = $attr.iconOff;
 
+      // Should we hide a back button when this tab is shown
+      $scope.hideBackButton = $scope.$eval($attr.hideBackButton);
+
+      // Whether we should animate on tab change, also impacts whether we
+      // tell any parent nav controller to animate
+      $scope.animate = $scope.$eval($attr.animate);
+
+      // Grab whether we should update any parent nav router on tab changes
+      $scope.doesUpdateNavRouter = $scope.$eval($attr.doesUpdateNavRouter) || true;
+
+      // watch for changes in the left buttons
+      var leftButtonsGet = $parse($attr.leftButtons);
+      $scope.$watch(leftButtonsGet, function(value) {
+        $scope.leftButtons = value;
+        if($scope.doesUpdateNavRouter) {
+          $scope.$emit('navRouter.leftButtonsChanged', $scope.rightButtons);
+        }
+      });
+
+      // watch for changes in the right buttons
+      var rightButtonsGet = $parse($attr.rightButtons);
+      $scope.$watch(rightButtonsGet, function(value) {
+        $scope.rightButtons = value;
+      });
+
+      // watch for changes in the title
+      var titleGet = $parse($attr.title);
       $scope.$watch(titleGet, function(value) {
-        console.log('Title changed');
         $scope.title = value;
-        navCtrl.setTitle(value);
+        $scope.$emit('navRouter.pageChanged', {
+          title: value,
+          animate: $scope.animate
+        });
       });
 
     }

js/ext/angular/src/directive/ionicTabBar.js

@@ -72,7 +72,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
 })
 
 // Generic controller directive
-.directive('tab', ['$animate', function($animate) {
+.directive('tab', ['$animate', '$parse', function($animate, $parse) {
   return {
     restrict: 'E',
     replace: true,
@@ -87,6 +87,30 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
         $scope.icon = $attr.icon;
         $scope.iconOn = $attr.iconOn;
         $scope.iconOff = $attr.iconOff;
+
+        // Should we hide a back button when this tab is shown
+        $scope.hideBackButton = $scope.$eval($attr.hideBackButton);
+
+        // Whether we should animate on tab change, also impacts whether we
+        // tell any parent nav controller to animate
+        $scope.animate = $scope.$eval($attr.animate);
+
+        // Grab whether we should update any parent nav router on tab changes
+        $scope.doesUpdateNavRouter = $scope.$eval($attr.doesUpdateNavRouter) || true;
+
+        var leftButtonsGet = $parse($attr.leftButtons);
+        $scope.$watch(leftButtonsGet, function(value) {
+          $scope.leftButtons = value;
+          if($scope.doesUpdateNavRouter) {
+            $scope.$emit('navRouter.leftButtonsChanged', $scope.rightButtons);
+          }
+        });
+
+        var rightButtonsGet = $parse($attr.rightButtons);
+        $scope.$watch(rightButtonsGet, function(value) {
+          $scope.rightButtons = value;
+        });
+
         tabsCtrl.add($scope);
         
         $scope.$watch('isVisible', function(value) {
@@ -106,6 +130,19 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
               childElement.addClass('view-full');
               $animate.enter(clone, $element.parent(), $element);
 
+              if($scope.title) {
+                // Send the title up in case we are inside of a nav controller
+                if($scope.doesUpdateNavRouter) {
+                  $scope.$emit('navRouter.pageShown', {
+                    title: $scope.title,
+                    rightButtons: $scope.rightButtons,
+                    leftButtons: $scope.leftButtons,
+                    hideBackButton: $scope.hideBackButton || false,
+                    animate: $scope.animate || false
+                  });
+                }
+                //$scope.$emit('navRouter.titleChanged', $scope.title);
+              }
               $scope.$broadcast('tab.shown');
             });
           }

js/ext/angular/test/navAndTabs.html

@@ -0,0 +1,143 @@
+<html ng-app="navTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Nav Bars And Tabs</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/css/ionic.css">
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+  </head>
+  <body>
+    <pane nav-router animation="slide-left-right">
+      <nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
+      <ng-view></ng-view>
+    </pane>
+
+    <script id="page1.html" type="text/ng-template">
+      <nav-page title="'Pets'" hide-back-button="true">
+        <tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
+
+          <!-- Pets tab -->
+          <tab title="Pets" icon="icon ion-home" ng-controller="PetsCtrl">
+            <content has-header="true" has-tabs="true">
+              <list>
+                <link-item ng-repeat="pet in pets" type="item-text-wrap" href="#/pet/{{pet.id}}">
+                    <h3>{{pet.title}}</h3>
+                    <p>{{pet.description}}</p>
+                  </item>
+                </link-item>
+              </list>
+            </content>
+          </tab>
+
+          <!-- Adoption tab -->
+          <tab title="Adopt" icon="icon ion-heart" ng-controller="AdoptCtrl" right-buttons="buttons">
+            <content has-header="true" has-tabs="true">
+              <div class="padding">
+                <h2>Adopt a pet today.</h2>
+              </div>
+              <div class="list list-inset">
+                <label class="item item-input">
+                  <span class="input-label">Your name</span>
+                  <input type="text">
+                </label>
+                <label class="item item-input">
+                  <span class="input-label">Your email</span>
+                  <input type="password">
+                </label>
+                <label class="item item-input">
+                  <textarea placeholder="Any more info?"></textarea>
+                </label>
+                <button class="button button-positive button-block">Adopt</button>
+              </div>
+            </content>
+          </tab>
+
+          <!-- Home tab -->
+          <tab title="About" icon="icon ion-search">
+            <content has-header="true" has-tabs="true" padding="true">
+              <h3>About this app</h3>
+              <p>
+                This is a sample seed project for the Ionic Framework. Please change it to match your needs.
+              </p>
+            </content>
+          </tab>
+
+        </tabs>
+      </nav-page>
+    </script>
+    <script id="pet.html" type="text/ng-template">
+      <nav-page title="pet.title" ng-controller="PetCtrl">
+      </nav-page>
+    </script>
+    <script id="page2.html" type="text/ng-template">
+      <nav-page title="'Beets'">
+        <h1>Page 2</h1>
+        <a class="button button-pure" nav-back>Back</a>
+        <a class="button button-assertive" href="#/page3">Next</a>
+      </nav-page>
+    </script>
+    <script id="page3.html" type="text/ng-template">
+      <nav-page title="'Battlestar Galactica'">
+        <h1>Page 3</h1>
+        <a class="button button-pure" nav-back>Back</a>
+      </nav-page>
+    </script>
+    <script>
+      angular.module('navTest', ['ionic'])
+
+
+      .config(function($routeProvider, $locationProvider) {
+        $routeProvider.when('/', {
+          templateUrl: 'page1.html',
+          controller: 'Page1Ctrl'
+        });
+
+        $routeProvider.when('/page2', {
+          templateUrl: 'page2.html',
+        });
+
+        $routeProvider.when('/page3', {
+          templateUrl: 'page3.html',
+        });
+
+        $routeProvider.when('/pet/:petId', {
+          templateUrl: 'pet.html',
+          controller: 'PetCtrl'
+        });
+        
+
+        // configure html5 to get links working on jsfiddle
+        //$locationProvider.html5Mode(true);
+
+      })
+
+      .controller('Page1Ctrl', function($scope) {
+        $scope.num = Math.floor(Math.random() * 100);
+      })
+
+      .controller('PetsCtrl', function($scope, $routeParams) {
+        $scope.pets = [
+          { id: 1, title: 'Cat', description: 'Furry little feline' }
+        ];
+      })
+
+      .controller('PetCtrl', function($scope, $routeParams) {
+        $scope.pet = {
+          title: 'Cat'
+          }
+      })
+
+      .controller('AdoptCtrl', function($scope) {
+        $scope.buttons = [
+          { text: 'Adopt' }
+        ];
+      });
+
+      
+    </script>
+  </body>
+</html>

scss/_animations.scss

@@ -384,7 +384,6 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
   > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
     -webkit-transition:all 250ms;
     -webkit-transition-timing-function: $ios7-timing-function;
-    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
     transition:all 250ms;
     transition-timing-function: $ios7-timing-function;
     opacity: 1;
@@ -408,7 +407,6 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
     > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
       -webkit-transition:all 250ms;
       -webkit-transition-timing-function: $ios7-timing-function;
-      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
       transition:all 250ms;
       transition-timing-function: $ios7-timing-function;
       opacity: 1;