ionic slide box dynamic height - fixes the issue where the slide boxes aren't taking up the full height of the device

directive.js

app.directive('dynamicHeight', function() {
    return {
        require: ['^ionSlideBox'],
        link: function(scope, elem, attrs, slider) {
            scope.$watch(function() {
                return slider[0].__slider.selected();
            }, function(val) {
                //getting the height of viewport
                var newHeight = window.getComputedStyle(elem.parents('ion-content')[0], null).getPropertyValue("height");
                if (parseInt(newHeight) > 0) {
                    var ionScrollTag = elem.find('ion-scroll')[0];
                    ionScrollTag.style.height = newHeight;
                }
            });
        }
    };
});

view.html

<ion-content>
    <ion-slide-box>
    
        <ion-slide class="slide" dynamic-height>
            <ion-scroll>
                <div class="slide-box box">
                  <!-- your stuff -->
                </div>
            </ion-scroll>
        </ion-slide>
    
    </ion-slide-box>
</ion-content>

I am getting an error TypeError: elem.parents is not a function

@rajeshwarpatlolla I have the same error

TypeError: Object [[object HTMLElement]] has no method 'parents'

Thanks, this worked for me !

For those who also have the TypeError: elem.parents is not a function error:
It's because jqlite (which is bundled with angular) does not have this method, because it is part of JQuery. So you have to add jquery (which must be loaded before angular will be loaded!) or you manually have to loop through the parents until you reach the ion-content

Thank you very much for this fix ! <3