0

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.

Gaurav Aggarwal
  • 9,809
  • 6
  • 36
  • 74

2 Answers2

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

Community
  • 1
  • 1
Gaurav Aggarwal
  • 9,809
  • 6
  • 36
  • 74
0

The problem is that - Slides/images must be visible before slider gets initiate.

In your case possible solutions are -

Either:

  1. You can reload slider after ng-show animation complete
  2. Slider can be initiate after ng-show animation complete

To reload bx slider doc -

http://bxslider.com/examples/reload-slider

http://bxslider.com/examples/reload-slider-settings

Sample code:

var slider = $('.bxslider').bxSlider({
  mode: 'horizontal'
});
//Inside ng-show callback
slider.reloadSlider();

Trigger event when ng-show is complete

Call a function when ng-show is triggered?

Community
  • 1
  • 1
Mohan Dere
  • 4,497
  • 1
  • 25
  • 21
  • This answer showing how to perform a function after `ng-show` but in my case i have created a directive which should work after `ng-show`. How to do this?? – Gaurav Aggarwal Aug 16 '16 at 11:02
  • @GauravAggarwal Please refer - http://stackoverflow.com/questions/16703276/angular-watch-for-ngshow-nghide-changes-in-ancestors-that-affect-child-dom-ele http://stackoverflow.com/questions/21056037/call-a-function-when-ng-show-is-triggered https://codepen.io/raduvultur/pen/Ahwne – Mohan Dere Aug 17 '16 at 13:58