Amila Iddamalgoda Amila Iddamalgoda - 1 year ago 457
AngularJS Question

Jquery bxslider not working + Angular js ng-repeat issue

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 image description here

Following will be the main code.

Javascript code

<script type="text/javascript">
slideWidth: 300,
minSlides: 2,
maxSlides: 3,
moveSlides: 1,
slideMargin: 10

HTML code

<div class="slider4">
<div ng-repeat="term in terms" > {{}}</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?

Answer Source

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 () {

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

You can see an example of it here:

Hope that helps and don't forget to vote!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download