fix(slideBox): do not require scroll parent

js/angular/directive/slideBox.js

@@ -9,27 +9,21 @@
  *
  * ![SlideBox](http://ionicframework.com.s3.amazonaws.com/docs/controllers/slideBox.gif)
  *
- * Note: The slideBox will always take up all of the space within its parent scroll
- * container. If you wish to have a smaller slidebox, create a custom-sized parent
- * <ion-scroll> element.
- *
  * @usage
  * ```html
- * <ion-content>
- *   <ion-slide-box on-slide-changed="slideHasChanged($index)"
- *     loop="shouldLoop"
- *     auto-play="3000">
- *     <ion-slide>
- *       <div class="box blue"><h1>BLUE</h1></div>
- *     </ion-slide>
- *     <ion-slide>
- *       <div class="box yellow"><h1>YELLOW</h1></div>
- *     </ion-slide>
- *     <ion-slide>
- *       <div class="box pink"><h1>PINK</h1></div>
- *     </ion-slide>
- *   </ion-slide-box>
- * </ion-content>
+ * <ion-slide-box on-slide-changed="slideHasChanged($index)"
+ *   loop="shouldLoop"
+ *   auto-play="3000">
+ *   <ion-slide>
+ *     <div class="box blue"><h1>BLUE</h1></div>
+ *   </ion-slide>
+ *   <ion-slide>
+ *     <div class="box yellow"><h1>YELLOW</h1></div>
+ *   </ion-slide>
+ *   <ion-slide>
+ *     <div class="box pink"><h1>PINK</h1></div>
+ *   </ion-slide>
+ * </ion-slide-box>
  * ```
  *
  * @param {expression=} selected A model bound to the selected slide index.
@@ -49,7 +43,7 @@ function($ionicSlideBoxDelegate, $window) {
   return {
     restrict: 'E',
     controller: '$ionSlideBox',
-    require: ['ionSlideBox', '^$ionicScroll'],
+    require: ['ionSlideBox', '^?$ionicScroll'],
     transclude: true,
     scope: {
       selectedIndex: '=?selected',
@@ -81,14 +75,18 @@ function($ionicSlideBoxDelegate, $window) {
 
     var throttledReposition = ionic.animationFrameThrottle(repositionSlideBox);
     throttledReposition();
-
-    var oldScrollingY = scrollCtrl.scrollView.options.scrollingY;
-    scrollCtrl.scrollView.options.scrollingY = false;
-
     angular.element($window).on('resize', throttledReposition);
+
+    if (scrollCtrl) {
+      var oldScrollingY = scrollCtrl.scrollView.options.scrollingY;
+      scrollCtrl.scrollView.options.scrollingY = false;
+    }
+
     scope.$on('$destroy', function() {
+      if (scrollCtrl) {
+        scrollCtrl.scrollView.options.scrollingY = oldScrollingY;
+      }
       angular.element($window).off('resize', throttledReposition);
-      scrollCtrl.scrollView.options.scrollingY = oldScrollingY;
     });
 
     // ***
@@ -97,12 +95,11 @@ function($ionicSlideBoxDelegate, $window) {
 
     // There is no way to make the slidebox stretch to a large enough size
     // when its children are all position: absolute elements.
-    // We just make it so the slidebox is *always* as large as its parent scroll
-    // container.
+    // We just make it so the slidebox is *always* as large as its offsetParent.
     function repositionSlideBox() {
       element.css({
-        width: scrollCtrl.$element.prop('offsetWidth') + 'px',
-        height: scrollCtrl.$element.prop('offsetHeight') + 'px'
+        width: element[0].offsetParent.offsetWidth + 'px',
+        height: element[0].offsetParent.offsetHeight + 'px'
       });
     }
 

scss/_slide-box.scss

@@ -5,14 +5,22 @@
  */
 
 .slider {
-  display: block;
   overflow: hidden;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .slider-slides {
   height: 100%;
   width: 100%;
   position: relative;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .slider-slide {

test/html/slideBox.html

@@ -94,7 +94,7 @@
 
       .controller('SlideCtrl', function($scope, $timeout) {
           $scope.items = [];
-          for (var i = 0; i < 1000; i++) {
+          for (var i = 0; i < 10; i++) {
             $scope.items.push(i);
           }