feat(ionNavBar,ionHeaderBar): use declarative syntax

js/ext/angular/src/directive/ionicBar.js

@@ -18,108 +18,98 @@ angular.module('ionic.ui.header', ['ngAnimate', 'ngSanitize'])
  * @name ionHeaderBar
  * @module ionic
  * @restrict E
- * @description
- * While Ionic provides simple Header and Footer bars that can be created through
- * HTML and CSS alone, Header bars specifically can be extended in order to
- * provide dynamic layout features such as auto-title centering and animation.
- * They are also used by the Views and Navigation Controller to animate a title
- * on navigation and toggle a back button.
+ * @controller ionicBar
  *
- * The main header bar feature provided is auto title centering.
- * In this situation, the title text will center itself until either the
- * left or right button content is too wide for the label to center.
- * In that case, it will slide left or right until it can fit.
- * You can also align the title left for a more Android-friendly header.
+ * @description
+ * Adds a fixed header bar above some content.
  *
- * Using two-way data binding, the header bar will automatically
- * readjust the heading title alignment when the title or buttons change.
+ * Is able to have left or right buttons, and additionally its title can be
+ * aligned through the {@link ionic.controller:ionicBar ionicBar controller}.
  *
- * @param {string} title The title use on the headerBar.
- * @param {expression=} leftButtons Point to an array of buttons to put on the left of the bar.
- * @param {expression=} rightButtons Point to an array of buttons to put on the right of the bar.
- * @param {string=} type The type of the bar, for example 'bar-positive'.
- * @param {string=} align Where to align the title. 'left', 'right', or 'center'.  Defaults to 'center'.
+ * @param {string=} model The model to assign this headerBar's 
+ * {@link ionic.controller:ionicBar ionicBar controller} to. 
+ * Defaults to assigning to $scope.headerBarController.
+ * @param {string=} align-title Where to align the title at the start.
+ * Avaialble: 'left', 'right', or 'center'.  Defaults to 'center'.
  *
  * @usage
  * ```html
- * <ion-header-bar
- *  title="{{myTitle}}"
- *  left-buttons="leftButtons"
- *  right-buttons="rightButtons"
- *  type="bar-positive"
- *  align-title="center">
+ * <ion-header-bar align-title="left">
+ *   <div class="buttons">
+ *     <button class="button">Left Button</button>
+ *   </div>
+ *   <h1 class="title">Title!</h1>
+ *   <div class="buttons">
+ *     <button class="button">Right Button</button>
+ *   </div>
  * </ion-header-bar>
+ * <ion-content>
+ *   Some content!
+ * </ion-content>
  * ```
- *
  */
-.directive('ionHeaderBar', ['$ionicScrollDelegate', function($ionicScrollDelegate) {
-  return {
-    restrict: 'E',
-    replace: true,
-    transclude: true,
-    template: '<header class="bar bar-header">\
-                <div class="buttons">\
-                  <button ng-repeat="button in leftButtons" class="button no-animation" ng-class="button.type" ng-click="button.tap($event, $index)" ng-bind-html="button.content">\
-                  </button>\
-                </div>\
-                <h1 class="title" ng-bind-html="title"></h1>\
-                <div class="buttons">\
-                  <button ng-repeat="button in rightButtons" class="button no-animation" ng-class="button.type" ng-click="button.tap($event, $index)" ng-bind-html="button.content">\
-                  </button>\
-                </div>\
-              </header>',
-
-    scope: {
-      leftButtons: '=',
-      rightButtons: '=',
-      title: '@',
-      type: '@',
-      alignTitle: '@'
-    },
-    link: function($scope, $element, $attr) {
-      var hb = new ionic.views.HeaderBar({
-        el: $element[0],
-        alignTitle: $scope.alignTitle || 'center'
-      });
-
-      $element.addClass($scope.type);
-
-      $scope.headerBarView = hb;
+.directive('ionHeaderBar', barDirective(true))
 
-      $scope.$watchCollection('leftButtons', function(val) {
-        // Resize the title since the buttons have changed
-        hb.align();
-      });
-
-      $scope.$watchCollection('rightButtons', function(val) {
-        // Resize the title since the buttons have changed
-        hb.align();
-      });
-
-      $scope.$watch('title', function(val) {
-        // Resize the title since the title has changed
-        hb.align();
-      });
-    }
-  };
-}])
-
-.directive('ionFooterBar', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    transclude: true,
-    template: '<footer class="bar bar-footer" ng-transclude>\
-              </footer>',
+/**
+ * @ngdoc directive
+ * @name ionFooterBar
+ * @module ionic
+ * @restrict E
+ * @controller ionicBar
+ *
+ * @description
+ * Adds a fixed footer bar below some content.
+ *
+ * Is able to have left or right buttons, and additionally its title can be
+ * aligned through the {@link ionic.controller:ionicBar ionicBar controller}.
+ *
+ * @param {string=} model The model to assign this footerBar's 
+ * {@link ionic.controller:ionicBar ionicBar controller} to. 
+ * Defaults to assigning to $scope.footerBarController.
+ * @param {string=} align-title Where to align the title at the start.
+ * Avaialble: 'left', 'right', or 'center'.  Defaults to 'center'.
+ *
+ * @usage
+ * ```html
+ * <ion-content>
+ *   Some content!
+ * </ion-content>
+ * <ion-footer-bar align-title="left">
+ *   <div class="buttons">
+ *     <button class="button">Left Button</button>
+ *   </div>
+ *   <h1 class="title">Title!</h1>
+ *   <div class="buttons">
+ *     <button class="button">Right Button</button>
+ *   </div>
+ * </ion-footer-bar>
+ * ```
+ */
+.directive('ionFooterBar', barDirective(false));
 
-    scope: {
-      type: '@',
-    },
+function barDirective(isHeader) {
+  var BAR_TEMPLATE = isHeader ?
+    '<header class="bar bar-header" ng-transclude></header>' :
+    '<footer class="bar bar-header" ng-transclude></footer>';
+  var BAR_MODEL_DEFAULT = isHeader ? 
+    'headerBarController' : 
+    'footerBarController';
+  return ['$parse', function($parse) {
+    return {
+      restrict: 'E',
+      replace: true,
+      transclude: true,
+      template: BAR_TEMPLATE,
+      link: function($scope, $element, $attr) {
+        var hb = new ionic.views.HeaderBar({
+          el: $element[0],
+          alignTitle: $attr.alignTitle || 'center'
+        });
 
-    link: function($scope, $element, $attr) {
-      $element.addClass($scope.type);
-    }
-  };
-});
+        $parse($attr.model || BAR_MODEL_DEFAULT).assign($scope.$parent, hb);
+      }
+    };
+  }];
+}
 
 })(ionic);