fix(ionTab): make it so tabNav works with ngRepeat

ionic-team · Apr 30, 2014 · 288d4ac · 288d4ac
1 parent 5cdc76a
commit 288d4ac
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 22 deletions.
diff --git a/js/angular/directive/tab.js b/js/angular/directive/tab.js
@@ -56,21 +56,18 @@ function($rootScope, $animate, $ionicBind, $compile) {
         element[0].querySelector('data-ion-nav-view');
       var navViewName = navView && navView.getAttribute('name');
 
-
-      //We create the tabNavElement in the compile phase so that the
+      //We create the tabNavTemplate in the compile phase so that the
       //attributes we pass down won't be interpolated yet - we want
       //to pass down the 'raw' versions of the attributes
-      var tabNavElement = angular.element(
-        '<ion-tab-nav' +
+      var tabNavTemplate = '<ion-tab-nav' +
         attrStr('ng-click', attr.ngClick) +
         attrStr('title', attr.title) +
         attrStr('icon', attr.icon) +
         attrStr('icon-on', attr.iconOn) +
         attrStr('icon-off', attr.iconOff) +
         attrStr('badge', attr.badge) +
         attrStr('badge-style', attr.badgeStyle) +
-        '></ion-tab-nav>'
-      );
+        '></ion-tab-nav>';
 
       //Remove the contents of the element so we can compile them later, if tab is selected
       //We don't use regular transclusion because it breaks element inheritance
@@ -113,6 +110,7 @@ function($rootScope, $animate, $ionicBind, $compile) {
           }
         }
 
+        var tabNavElement = angular.element(tabNavTemplate);
         tabNavElement.data('$ionTabsController', tabsCtrl);
         tabNavElement.data('$ionTabController', tabCtrl);
         tabsCtrl.$tabsElement.append($compile(tabNavElement)($scope));

diff --git a/js/angular/directive/tabNav.js b/js/angular/directive/tabNav.js
@@ -26,7 +26,7 @@ IonicModule
           tabCtrl = ctrls[1];
 
         //Remove title attribute so browser-tooltip does not apear
-        $element[0].removeAttribute('title');
+        // $element[0].removeAttribute('title');
 
         $scope.selectTab = function(e) {
           e.preventDefault();

diff --git a/test/html/tabs-repeat.html b/test/html/tabs-repeat.html
@@ -8,26 +8,27 @@
     <script src="../../../../dist/js/ionic.bundle.js"></script>
   </head>
    <body ng-init="pages=[
-                  {'id':'first',
-                  'icon':'ion-link'
-                  },
+    {'id':'first',
+    'icon':'ion-link'
+    },
 
-                  {'id':'second',
-                  'icon':'icon ion-link'
+    {'id':'second',
+    'icon':'icon ion-link'
 
-                   },
+     },
 
-                  {'id':'third',
-                  'icon':'ion-link'
+    {'id':'third',
+    'icon':'ion-link'
 
-                  }
+    }
 
-                  ]">
-    <ion-tabs tabs-style="tabs-top tabs-positive tabs-icon-top">
-    <ion-tab ng-repeat="p in pages" title="{{p.id}}" icon="{{p.icon}}">
-        <header class="bar bar-positive bar-header"></header>
-        <ion-content class="has-header has-subheader">
-          <p></p>
+    ]">
+    <ion-tabs class="tabs-top tabs-positive tabs-icon-top">
+      <ion-tab ng-repeat="p in pages" title="{{p.id}}" icon="{{p.icon}}">
+        <ion-header-bar class="bar-positive">
+          <h1 class="title">Hello</h1>
+        </ion-header-bar>
+        <ion-content>
           <b>{{p.id}}</b>
           <p>...</p>
           <p>...</p>