Question

48

Jquery bxslider not working + Angular js ng-repeat issue

rated 0 times [ 52] [ 4] / answers: 1 / hits: 5268 / 10 Years ago, sun, april 27, 2014, 12:00:00

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)
enter

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bryantc

Add To Favorites

Follow

Total Points: 455

Total Questions: 96

Total Answers: 110

Location: San Marino

Member since Thu, Jun 30, 2022

2 Years ago

bryantc questions

1 How to fix TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')

Tue, Dec 7, 21, 00:00, 3 Years ago

1 NextJS / vercel - 504 Error 'FUNCTION_INVOCATION_TIMEOUT'

Fri, Aug 13, 21, 00:00, 3 Years ago

1 using react router with next.js

Tue, Mar 30, 21, 00:00, 3 Years ago

1 Notification system using socket.io

Fri, Jun 5, 20, 00:00, 4 Years ago

1 prisma2: how to fetch nested fields?

Wed, May 27, 20, 00:00, 4 Years ago

View All

answered 10 Years ago tiffany · Accepted Answer

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.net/paulocoelho/BsMqq/4/

Hope that helps and don't forget to vote!