javascript - Jquery bxslider not working + Angular js ng-repeat issue - Stack Overflow

admin管理员组

文章数量:1313121

I'm working on a Angular js project where I get number of terms and i'm using ng repeat to show each term in the front end .it works fine.I have shown them in a bx slider (jquery responsive bxslider)

Following will be the main code.

Javascript code

  <script type="text/javascript">
    $(document).ready(function(){
      $('.slider4').bxSlider({
        slideWidth: 300,
        minSlides: 2,
        maxSlides: 3,
        moveSlides: 1,
        slideMargin: 10
      });
    });
     </script>

HTML code

<div class="slider4">
    <div ng-repeat="term in terms" >  {{term.name}}</div>   
  </div>

I can see all the terms are loaded nicely but when I click arrow keys slider doesn't work .I can't figure out the issue.I'm pretty sure the problem is with ng-repeat. Because when i remove ng-repeat and just add some images/divs to the <div class="slider4"></div>it works fine.

Can some one help me? Why is this not working? Is it a draw back in Angular js?Can't I achieve my goal?

I'm working on a Angular js project where I get number of terms and i'm using ng repeat to show each term in the front end .it works fine.I have shown them in a bx slider (jquery responsive bxslider)

Following will be the main code.

Javascript code

  <script type="text/javascript">
    $(document).ready(function(){
      $('.slider4').bxSlider({
        slideWidth: 300,
        minSlides: 2,
        maxSlides: 3,
        moveSlides: 1,
        slideMargin: 10
      });
    });
     </script>

HTML code

<div class="slider4">
    <div ng-repeat="term in terms" >  {{term.name}}</div>   
  </div>

I can see all the terms are loaded nicely but when I click arrow keys slider doesn't work .I can't figure out the issue.I'm pretty sure the problem is with ng-repeat. Because when i remove ng-repeat and just add some images/divs to the <div class="slider4"></div>it works fine.

Can some one help me? Why is this not working? Is it a draw back in Angular js?Can't I achieve my goal?

• javascript
• jquery
• html
• angularjs
• bxslider

Share Improve this question Follow edited Apr 27, 2014 at 14:36 Amila Iddamalgoda asked Apr 27, 2014 at 12:48 Amila IddamalgodaAmila Iddamalgoda 4,2961212 gold badges5050 silver badges8686 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

bxSlider doesn't work because the jQuery executes before your ng-repeat has finished.

You can use something like finishingmoves' directive to execute a function after ng-repeat has finished.

The directive is the following:

var module = angular.module('testApp', [])
.directive('onFinishRender', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element, attr) {
        if (scope.$last === true) {
            $timeout(function () {
                scope.$emit('ngRepeatFinished');
            });
        }
    }
    }
});

(finishingmoves directive from here: Calling a function when ng-repeat has finished)

You can see an example of it here: http://jsfiddle/paulocoelho/BsMqq/4/

Hope that helps and don't forget to vote!

You can call method when window load like this use

$(window).bind("load", function() {  
 });

in the place of

$(document).ready(function(){
});

Not my solution, but I'd thought I would pass it along.

I like this solution the best (Utilizes directive controllers)

// slightly modified from jsfiddle

// bxSlider directive
controller: function() {},
link: function (scope, element, attrs, controller) {
    controller.initialize = function() {
        element.bxSlider(BX_SLIDER_OPTIONS);
    };
}

// bxSliderItem directive
require: '^bxSlider',
link: function(scope, element, attrs, controller) {
    if (scope.$last) {
        controller.initialize();
    }
}

http://jsfiddle/CaioToOn/Q5AcH/8/

In ng-repeat call any function(ex:initBxslider()) on $last object

<div ng-repeat="term in terms" >  
  {{term.name}}
  <span ng-init="$last && data.initBxslider()"></span>
</div> 

in controller:

 $scope.initBxslider = function () {
        $timeout(function () {
            $('.slider4').bxSlider({
               slideWidth: 300,
               minSlides: 2,
               maxSlides: 3,
               moveSlides: 1,
               slideMargin: 10
             });
        });
    }

本文标签： javascriptJquery bxslider not workingAngular js ngrepeat issueStack Overflow