feat(ionSlideBox): hide/show pager depending on dynamic show-pager at…

…tribute
ionic-team · Feb 9, 2015 · c631a8e · c631a8e
1 parent 1e0174a
commit c631a8e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/js/angular/directive/slideBox.js b/js/angular/directive/slideBox.js
@@ -133,12 +133,20 @@ function($timeout, $compile, $ionicSlideBoxDelegate, $ionicHistory) {
     '</div>',
 
     link: function($scope, $element, $attr, slideBoxCtrl) {
-      // If the pager should show, append it to the slide box
-      if ($scope.$eval($scope.showPager) !== false) {
-        var childScope = $scope.$new();
-        var pager = jqLite('<ion-pager></ion-pager>');
-        $element.append(pager);
-        $compile(pager)(childScope);
+      $attr.$observe('showPager', function(show) {
+        show = $scope.$eval(show);
+        getPager().toggleClass('hide', !show);
+      });
+
+      var pager;
+      function getPager() {
+        if (!pager) {
+          var childScope = $scope.$new();
+          pager = jqLite('<ion-pager></ion-pager>');
+          $element.append(pager);
+          pager = $compile(pager)(childScope);
+        }
+        return pager;
       }
     }
   };

diff --git a/test/html/slideBox.html b/test/html/slideBox.html
@@ -41,13 +41,13 @@
       }
     </style>
   </head>
-  <body>
+  <body ng-init="$root.showPager = true">
 
     <div ng-controller="SlideCtrl">
       <ion-side-menus>
         <ion-side-menu-content>
           <ion-header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></ion-header-bar>
-          <ion-slide-box on-slide-changed="slideChanged(index)" show-pager="true" pager-click="pagerClick(index)" does-continue="true" auto-play="false">
+          <ion-slide-box on-slide-changed="slideChanged(index)" show-pager="{{$root.showPager}}" pager-click="pagerClick(index)" does-continue="true" auto-play="false">
             <ion-slide ng-controller="FirstSlideCtrl">
               <h3>Thank you for choosing the Awesome App!</h3>
               <div id="logo">