From 5f0ae6ca517eb3fcc3cab924bd06111194a2bd8d Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Mon, 18 Nov 2013 18:48:57 -0600
Subject: [PATCH] Fixed #158 - tab bar styles not set

---
 dist/js/ionic-angular.js                          | 15 ++++++++++++++-
 js/ext/angular/src/directive/ionicTabBar.js       | 15 ++++++++++++++-
 js/ext/angular/test/directive/ionicTabBar.unit.js | 11 +++++++++++
 js/ext/angular/test/tabs.html                     |  4 ++--
 4 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index d5036b6d33..6805a8a0e9 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -25611,11 +25611,24 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     template: '<div class="content"><tab-controller-bar></tab-controller-bar></div>',
     compile: function(element, attr, transclude, tabsCtrl) {
       return function($scope, $element, $attr) {
+        var tabs = $element[0].querySelector('.tabs');
 
         $scope.tabsType = $attr.tabsType || 'tabs-positive';
         $scope.tabsStyle = $attr.tabsStyle;
         $scope.animation = $attr.animation;
 
+        $attr.$observe('tabsStyle', function(val) {
+          if(tabs) {
+            angular.element(tabs).addClass($attr.tabsStyle);
+          }
+        });
+
+        $attr.$observe('tabsType', function(val) {
+          if(tabs) {
+            angular.element(tabs).addClass($attr.tabsType);
+          }
+        });
+
         $scope.$watch('activeAnimation', function(value) {
           //$element.removeClass($scope.animation + ' ' + $scope.animation + '-reverse');
           $element.addClass($scope.activeAnimation);
@@ -25683,7 +25696,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     template: '<div class="tabs">' + 
       '<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' + 
     '</div>',
-    link: function($scope, $element, $attr) {
+    link: function($scope, $element, $attr, tabsCtrl) {
       $element.addClass($scope.tabsType);
       $element.addClass($scope.tabsStyle);
     }
diff --git a/js/ext/angular/src/directive/ionicTabBar.js b/js/ext/angular/src/directive/ionicTabBar.js
index d1f2cb70a4..c0f647d5c0 100644
--- a/js/ext/angular/src/directive/ionicTabBar.js
+++ b/js/ext/angular/src/directive/ionicTabBar.js
@@ -54,11 +54,24 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     template: '<div class="content"><tab-controller-bar></tab-controller-bar></div>',
     compile: function(element, attr, transclude, tabsCtrl) {
       return function($scope, $element, $attr) {
+        var tabs = $element[0].querySelector('.tabs');
 
         $scope.tabsType = $attr.tabsType || 'tabs-positive';
         $scope.tabsStyle = $attr.tabsStyle;
         $scope.animation = $attr.animation;
 
+        $attr.$observe('tabsStyle', function(val) {
+          if(tabs) {
+            angular.element(tabs).addClass($attr.tabsStyle);
+          }
+        });
+
+        $attr.$observe('tabsType', function(val) {
+          if(tabs) {
+            angular.element(tabs).addClass($attr.tabsType);
+          }
+        });
+
         $scope.$watch('activeAnimation', function(value) {
           //$element.removeClass($scope.animation + ' ' + $scope.animation + '-reverse');
           $element.addClass($scope.activeAnimation);
@@ -126,7 +139,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     template: '<div class="tabs">' + 
       '<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' + 
     '</div>',
-    link: function($scope, $element, $attr) {
+    link: function($scope, $element, $attr, tabsCtrl) {
       $element.addClass($scope.tabsType);
       $element.addClass($scope.tabsStyle);
     }
diff --git a/js/ext/angular/test/directive/ionicTabBar.unit.js b/js/ext/angular/test/directive/ionicTabBar.unit.js
index c7e39cc0a2..fd56410d3c 100644
--- a/js/ext/angular/test/directive/ionicTabBar.unit.js
+++ b/js/ext/angular/test/directive/ionicTabBar.unit.js
@@ -113,6 +113,17 @@ describe('Tabs directive', function() {
     scope.$digest();
     expect(element.find('a').length).toBe(2);
   });
+
+  it('Sets style on child tabs', function() {
+    element = compile('<tabs tabs-style="tabs-positive" tabs-type="tabs-icon-bottom">' + 
+      '<tab active="true" title="Item" icon="icon-default"></tab>' + 
+      '<tab active="true" title="Item" icon="icon-default"></tab>' + 
+    '</tabs>')(scope);
+    scope.$digest();
+    var tabs = element[0].querySelector('.tabs');
+    expect(angular.element(tabs).hasClass('tabs-positive')).toEqual(true);
+    expect(angular.element(tabs).hasClass('tabs-icon-bottom')).toEqual(true);
+  });
 });
 
 describe('Tab Item directive', function() {
diff --git a/js/ext/angular/test/tabs.html b/js/ext/angular/test/tabs.html
index ccdea97f90..d78a14fa68 100644
--- a/js/ext/angular/test/tabs.html
+++ b/js/ext/angular/test/tabs.html
@@ -43,6 +43,8 @@
         text-decoration: line-through;
       }
     </style>
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
   </head>
   <body ng-controller="RootCtrl">
     <tabs
@@ -129,8 +131,6 @@
       </div>
     </script>
 
-    <script src="../../../../dist/js/ionic.js"></script>
-    <script src="../../../../dist/js/ionic-angular.js"></script>
     <script>
       angular.module('tabsTest', ['ionic'])