feat(ionNavBar): allow navbar inside ion-view to transition whole bar

Fixes #1232
ionic-team · Apr 30, 2014 · 42177c3 · 42177c3
1 parent aeda316
commit 42177c3
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 25 deletions.
diff --git a/js/angular/directive/navBackButton.js b/js/angular/directive/navBackButton.js
@@ -63,7 +63,14 @@
 IonicModule
 .directive('ionNavBackButton', [
   '$animate',
-function($animate) {
+  '$rootScope',
+function($animate, $rootScope) {
+  var backIsShown = false;
+  //If the current viewstate does not allow a back button,
+  //always hide it.
+  $rootScope.$on('$viewHistory.historyChange', function(e, data) {
+    backIsShown = !!data.showBack;
+  });
   return {
     restrict: 'E',
     require: '^ionNavBar',
@@ -79,19 +86,11 @@ function($animate) {
           });
         }
 
-        //If the current viewstate does not allow a back button,
-        //always hide it.
-        var deregisterListener = $scope.$parent.$on(
-          '$viewHistory.historyChange',
-          function(e, data) {
-            $scope.hasBackButton = !!data.showBack;
-          }
-        );
-        $scope.$on('$destroy', deregisterListener);
-
         //Make sure both that a backButton is allowed in the first place,
         //and that it is shown by the current view.
-        $scope.$watch('!!(backButtonShown && hasBackButton)', ionic.animationFrameThrottle(function(show) {
+        $scope.$watch(function() {
+          return !!(backIsShown && $scope.backButtonShown);
+        }, ionic.animationFrameThrottle(function(show) {
           if (show) $animate.removeClass($element, 'ng-hide');
           else $animate.addClass($element, 'ng-hide');
         }));

diff --git a/js/angular/directive/navBar.js b/js/angular/directive/navBar.js
@@ -35,6 +35,33 @@
  * with {@link ionic.service:$ionicNavBarDelegate}.
  * @param align-title {string=} Where to align the title of the navbar.
  * Available: 'left', 'right', 'center'. Defaults to 'center'.
+ *
+ * </table><br/>
+ *
+ * ### Alternative Usage
+ *
+ * Alternatively, you may put ion-nav-bar inside of each individual view's ion-view element.
+ * This will allow you to have the whole navbar, not just its contents, transition every view change.
+ *
+ * This is similar to using a header bar inside your ion-view, except it will has all the power of a navbar.
+ *
+ * If you do this, simply put nav buttons inside the navbar itself; do not use `<ion-nav-buttons>`.
+ *
+ *
+ * ```html
+ * <ion-nav-bar class="bar-positive">
+ *   <ion-nav-back-button>
+ *     Back
+ *   </ion-nav-back-button>
+ *   <div class="buttons right-buttons">
+ *     <button class="button">
+ *       Right Button
+ *     </button>
+ *   </div>
+ * </ion-nav-bar>
+ * <ion-view title="myTitle">
+ * </ion-view>
+ * ```
  */
 IonicModule
 .directive('ionNavBar', [

diff --git a/test/unit/angular/directive/navBackButton.unit.js b/test/unit/angular/directive/navBackButton.unit.js
@@ -56,28 +56,35 @@ describe('ionNavBackButton directive', function() {
     expect(el.hasClass('button back-button')).toBe(true);
   });
 
-  it('should set hasBackButton through historyChange event', function() {
+  it('should hide based on historyChange', inject(function($rootScope) {
+    ionic.animationFrameThrottle = function(cb) { return cb; };
     var el = setup();
-    expect(el.scope().hasBackButton).toBeFalsy();
-    el.scope().$parent.$broadcast('$viewHistory.historyChange', {showBack: true});
-    expect(el.scope().hasBackButton).toBe(true);
-    el.scope().$parent.$broadcast('$viewHistory.historyChange', {showBack: false});
-    expect(el.scope().hasBackButton).toBe(false);
-  });
+    el.scope().backButtonShown = true;
+    expect(el.hasClass('ng-hide')).toBe(true);
+    $rootScope.$broadcast('$viewHistory.historyChange', {showBack:true});
+    el.scope().$apply();
+    expect(el.hasClass('ng-hide')).toBe(false);
+    $rootScope.$broadcast('$viewHistory.historyChange', {showBack:false});
+    el.scope().$apply();
+    expect(el.hasClass('ng-hide')).toBe(true);
+  }));
 
-  it('should hide based on backButtonShown && hasBackButton', function() {
+  it('should hide based on backButtonShown', inject(function($rootScope) {
     ionic.animationFrameThrottle = function(cb) { return cb; };
     var el = setup();
     expect(el.hasClass('ng-hide')).toBe(true);
-    el.scope().$apply('backButtonShown = true; hasBackButton = true');
+    $rootScope.$broadcast('$viewHistory.historyChange', {showBack:true});
+    el.scope().$apply('backButtonShown = true');
     expect(el.hasClass('ng-hide')).toBe(false);
-    el.scope().$apply('backButtonShown = false; hasBackButton = true');
+    el.scope().$apply('backButtonShown = false');
     expect(el.hasClass('ng-hide')).toBe(true);
-    el.scope().$apply('backButtonShown = true; hasBackButton = false');
+    $rootScope.$broadcast('$viewHistory.historyChange', {showBack:false});
+    el.scope().$apply('backButtonShown = true');
     expect(el.hasClass('ng-hide')).toBe(true);
-    el.scope().$apply('backButtonShown = true; hasBackButton = true');
+    $rootScope.$broadcast('$viewHistory.historyChange', {showBack:true});
+    el.scope().$apply('backButtonShown = true');
     expect(el.hasClass('ng-hide')).toBe(false);
-  });
+  }));
 
   it('should transclude content', function() {
     var el = setup('', '<b>content</b> {{1+2}}');