Header bar tweaks

dist/js/ionic-angular.js

@@ -27,6 +27,11 @@ angular.module('ionic.ui', [
 angular.module('ionic', [
     'ionic.service',
     'ionic.ui',
+    
+    // Angular deps
+    'ngAnimate',
+    'ngTouch',
+    'ngSanitize'
 ]);
 ;
 angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet', 'ngAnimate'])
@@ -637,11 +642,26 @@ angular.module('ionic.ui.header', ['ngAnimate'])
     restrict: 'E',
     replace: true,
     transclude: true,
-    template: '<header class="bar bar-header" ng-transclude></header>',
+    template: '<header class="bar bar-header">\
+                <div class="buttons">\
+                  <button ng-repeat="button in leftButtons" class="button" ng-class="button.type" ng-click="button.click($event, $index)" ng-bind-html="button.content">\
+                  </button>\
+                </div>\
+                <h1 class="title" ng-bind="title"></h1>\
+                <div class="buttons">\
+                  <button ng-repeat="button in rightButtons" class="button" ng-class="button.type" ng-click="button.click($event, $index)" ng-bind-html="button.content">\
+                  </button>\
+                </div>\
+              </header>',
+
     scope: {
+      leftButtons: '=',
+      rightButtons: '=',
+      title: '=',
       type: '@',
-      alignTitle: '@',
+      alignTitle: '@'
     },
+
     link: function($scope, $element, $attr) {
       var hb = new ionic.views.HeaderBar({
         el: $element[0],
@@ -652,6 +672,22 @@ angular.module('ionic.ui.header', ['ngAnimate'])
 
       $scope.headerBarView = hb;
 
+      $scope.$watch('leftButtons', function(val) {
+        // Resize the title since the buttons have changed
+        hb.align();
+      });
+
+      $scope.$watch('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
+        console.log('Title changed');
+        hb.align();
+      });
+
       $scope.$on('$destroy', function() {
         //
       });