Correct nested directives and shared scope thing

ext/angular/src/ionicTabBar.js

@@ -1,6 +1,9 @@
 angular.module('ionic.ui.tabbar', {})
 
-.controller('TabBarCtrl', function($scope) {
+.controller('TabBarCtrl', ['$scope', '$element', function($scope, $element) {
+  var tabs = $scope.tabs = [];
+
+  
   $scope.selectTab = function(index) {
   };
   $scope.beforeTabSelect = function(index) {
@@ -8,34 +11,41 @@ angular.module('ionic.ui.tabbar', {})
   $scope.tabSelected = function(index) {
   };
 
+  this.addTab = function(tab) {
+    tabs.push(tab);
+  };
+
   this.getSelectedTabIndex = function() {
     return $scope.selectedIndex;
-  }
+  };
 
   this.selectTabAtIndex = function(index) {
     $scope.selectedIndex = index;
   };
-})
+
+  this.getNumTabs = function() {
+    return tabs.length;
+  };
+}])
 
 .directive('tabBar', function() {
   return {
     restrict: 'E',
     replace: true,
+    scope: {},
     transclude: true,
     controller: 'TabBarCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
-    template: '<div class="full-section"></div>',
+    template: '<div class="view-wrapper" ng-transclude></div>',
   }
 })
 
-.controller('TabsCtrl', function($scope) {
-})
-
 .directive('tabs', function() {
   return {
     restrict: 'E',
     replace: true,
-    controller: 'TabBarCtrl',
+    require: '^tabBar',
+    transclude: true,
     template: '<footer class="bar bar-tabs bar-footer bar-success">' + 
   '<nav class="tabs">' + 
     '<ul class="tabs-inner">' + 
@@ -51,13 +61,13 @@ angular.module('ionic.ui.tabbar', {})
   return {
     restrict: 'E',
     replace: true,
-    controller: 'TabBarCtrl',
+    require: '^tabBar',
     scope: {
       text: '@',
       icon: '@',
       tabSelected: '@'
     },
-    link: function(scope, element, attrs, TabBarCtrl) {
+    link: function(scope, element, attrs, tabBar) {
       // Set a default item text if none is provided
       attrs.$observe('text', function(value) {
         scope.text = value || 'Item';

ext/angular/test/ionicTabBar.unit.js

@@ -1,5 +1,5 @@
 describe('Tab Bar Controller', function() {
-  var compile, element, scope;
+  var compile, element, scope, ctrl;
 
   beforeEach(module('ionic.ui.tabbar'));
   
@@ -20,8 +20,6 @@ describe('Tab Bar directive', function() {
 
   beforeEach(module('ionic.ui.tabbar'));
   
-  //beforeEach(module('ext/angular/tmpl/ionicTabBar.tmpl.html', 'ext/angular/tmpl/ionicTabs.tmpl.html'));
-
   beforeEach(inject(function($compile, $rootScope) {
     compile = $compile;
     scope = $rootScope;
@@ -29,7 +27,7 @@ describe('Tab Bar directive', function() {
 
   it('Has section wrapper class', function() {
     element = compile('<tab-bar></tab-bar>')(scope);
-    expect(element.hasClass('full-section')).toBe(true);
+    expect(element.hasClass('view-wrapper')).toBe(true);
   });
 });
 
@@ -44,8 +42,10 @@ describe('Tabs directive', function() {
   }));
   
   it('Has tab class', function() {
-    element = compile('<tabs></tabs>')(scope);
-    expect(element.hasClass('bar-tabs')).toBe(true);
+    element = compile('<tab-bar><tabs></tabs></tab-bar>')(scope);
+    scope.$digest();
+    console.log(element);
+    expect(element.find('.bar').hasClass('bar-tabs')).toBe(true);
   });
   
   it('Has tab children', function() {
@@ -54,7 +54,7 @@ describe('Tabs directive', function() {
       { text: 'Fun', icon: 'icon-fun' },
       { text: 'Beer', icon: 'icon-beer' },
     ];
-    element = compile('<tabs></tabs>')(scope);
+    element = compile('<tab-bar><tabs></tabs></tab-bar>')(scope);
     scope.$digest();
     expect(element.find('li').length).toBe(3);
   });
@@ -65,20 +65,29 @@ describe('Tab Item directive', function() {
   
   beforeEach(module('ionic.ui.tabbar'));
 
-  beforeEach(inject(function($compile, $rootScope) {
+  beforeEach(inject(function($compile, $rootScope, $controller) {
     compile = $compile;
     scope = $rootScope;
+
+    scope.tabs = [
+      { text: 'Home', icon: 'icon-home' },
+      { text: 'Fun', icon: 'icon-fun' },
+      { text: 'Beer', icon: 'icon-beer' },
+    ];
+
+    element = compile('<tab-bar><tabs><tab-item></tab-item></tabs></tab-bar>')(scope);
+    scope.$digest();
   }));
   
   it('Default text works', function() {
-    element = compile('<tab-item></tab-item>')(scope);
-    scope.$digest();
-    expect(element.find('a').text()).toEqual('Item');
+    expect(element.find('a').first().text()).toEqual('Item');
   });
 
   it('Default icon works', function() {
-    element = compile('<tab-item></tab-item>')(scope);
-    scope.$digest();
-    expect(element.find('i').hasClass('icon-default')).toBeTruthy();
+    expect(element.find('i').hasClass('icon-default')).toEqual(true);
+  });
+
+  it('Click sets correct tab index', function() {
+    expect(element.find('i').hasClass('icon-default')).toEqual(true);
   });
 })

ionic.conf.js

@@ -14,6 +14,10 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
+
+      // Include jQuery only for testing convience (lots of DOM checking for unit tests on directives)
+      'https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
+
       'vendor/angular/1.2.0rc1/*',
       'ext/angular/src/**/*.js',
       'ext/angular/test/**/*.js',