bxslider bx-viewport height is 0 if shown later

Question

I have an angular application in which i am using bxslider plugin.

I have created bxslider directive to call the plugin and everything was working fine till i extended the functionality.

This is the code for creating directive

angular.module('sbAdminApp')
.directive('bxSlider', function(){
    return{
        restrict: "A",
        require: "ngModel",
        link: function(scope, element, attrs, ctrl){
            element.ready(function(){
                $($(element[0])).bxSlider({
                    controls:false,
                    pager:true,
                    maxSlides: 1,
                    minSlides:1
                });
            })
        }
    }
})

This is the html

<div class="banner_section" ng-model="bannerSlider" bx-slider>
    <div class="slide" ng-repeat="banner in mobileBanner track by $index">
        <img ng-src="images/{{banner}}">
    </div>
</div>

Controller with values in array

angular.module('sbAdminApp')
.controller('mobileViewCtrl', function($scope){
    $scope.mobileBanner = ['banner_small.png', 'banner_small.png', 'banner_small.png'];
})

But actually that slider div is hidden and i am showing it with ng-show on click of anchor because of which the height of bxslider is 0 i need to do slight resize of window to let bxslider get the required height.

I want bxslider should come correct initially when i am showing div.

Answer 1

Thanks for all you support mates. I found the answer.

I was using ng-show to manage when i need to show the slider because of which initially the slider was hidden and giving problem.

But now i switched to ng-if which is not just hiding the slider or completely removing it from DOM and insert it when i need so that bxslider is initialised only when shown and working completely fine.

Found the difference here : what is the difference between ng-if and ng-show/ng-hide