AngularJS - Jquery Slider loading

Question

I'm trying to use a jquery plugin within a partial in angularjs.

Directive:

app.directive('slideit',function() {
    return function(scope, elm, attrs) {
        elm.bxSlider({
          adaptiveHeight: true,
          mode: 'fade'
        });
    };
});

HTML:

<div id="sliderwrapper" >
    <ul class="slider" slideit>
        <li ng-repeat="image in dealer.images"><img ng-src="{{image}}" alt="" /></li> 
    </ul>
</div>

The output shows me, that the bxSlider() is successfully running on the directive. But the list and/or the tags are not touched. Just with normal AngularJS code but not with the jQuery plugin.

What I'm doing wrong?

pavelgj · Accepted Answer · 2013-01-07 17:41:08Z

2

I believe the issues is with the timing. "slideit" directive is invoked before your list is rendered, and afterwards it's totally redrawn again by ngRepeat and bxSlider doesn't even suspect that this is happening.

Just to validate this hypothesis (don't use this in production, as it's very ugly and might not even work if your model changes) try:

app.directive('slideit',function() {
    return function(scope, elm, attrs) {
        setTimeout(function() {
            elm.bxSlider({
              adaptiveHeight: true,
              mode: 'fade'
            });
        }, 100);
    };
});

There's a bigger issue here: you're trying to "compile" HTML with both Angular an JQuery and they are not necessarily compatible. To avoid the clashes, I'd recommend rendering the list by hand inside your directive and then calling bxSlider on that dynamically constructed DOM. It's not pretty, but it should be more stable. Ex:

<ul slideit="dealer.images"></ul>

directive:

app.directive('slideit',function() {
    return function(scope, elm, attrs) {
        scope.$watch(attrs.slideit, function(images) {
            var html = '';
            for (var i = 0; i < images.length; i++) {
                 html += '<li><img ng-src="' + images[i] + '" alt="" /></li>';
            }
            elm[0].innerHTML = html;
            elm.bxSlider({
              adaptiveHeight: true,
              mode: 'fade'
            });
        });
    };
});

(I haven't tested this, it's just an idea)

edited Jan 7, 2013 at 17:41

answered Jan 7, 2013 at 17:34

pavelgj

2,71113 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kenny Bastani Over a year ago

Make sure to check images.length is greater than 0.

asgoth · Accepted Answer · 2013-01-07 21:55:31Z

1

This works. It has an ng-repeat within the directive. The bxSlider gets started on ready() of the element.

app.directive('slideit',function() {
    return {
       restrict: 'A',
       replace: true,
       scope: {
         slideit: '=' 
       },
       template: '<ul class="bxslider">' +
                   '<li ng-repeat="slide in slides">' +
                     '<img ng-src="{{slide.src}}" alt="" />' +
                   '</li>' +
                  '</ul>',
       link: function(scope, elm, attrs) {
          elm.ready(function() {
            scope.$apply(function() {
                scope.slides = scope.slideit;
            });                    
            elm.bxSlider({
              adaptiveHeight: true,
              mode: 'fade'});   
            });
       }
    }; 
});

HTML:

<div slideit="images"></div>

Edit: Here is a plnkr.

edited Jan 7, 2013 at 21:55

answered Jan 7, 2013 at 17:27

asgoth

35.8k12 gold badges91 silver badges98 bronze badges

3 Comments

Marek123 Over a year ago

Checked it, hasn't workd. An } was missing but even without the error the tags weren't "bxSlider"'ed. Just an additional span tag was there... strange.

asgoth Over a year ago

Added a plnkr in the answer. Images are shown, but too many bullets still.

asgoth Over a year ago

Fixed it. Solution is using a elm.ready(), in which you assign the images (slides) and kickoff bxslider. See plnkr.

Marek123 · Accepted Answer · 2013-01-07 17:16:47Z

Figured it out:
Add the following directives:

app.directive("mySlider", function() {
    return {
        restrict: 'E',
        replace: true,
        scope: true,
        template: '<ul class="slider"><li check-last ng-repeat="image in dealer.images"><img ng-src="{{image}}" alt="" /></li></ul>'
    };
});
app.directive('checkLast', function () {
        return function (scope, element, attrs) {
            //console.log(scope.$position);
            if (scope.$last=== true) {
                element.ready(function () {
                    $('.slider').bxSlider({
                      mode: 'fade',
                      pager: false
                    });    
                })
            }
        }
    });

Mohsen · Accepted Answer · 2015-08-10 05:43:44Z

just maintain the dependency of file js file!

 <script src="/yii-application/frontend/web/js/libraries/angular/angular.min.js"></script>
 <script src="/yii-application/frontend/web/js/libraries/angular/angular-ui.js"></script>
 <script src="/yii-application/frontend/web/js/recordata/country.js"></script>
 <script src="/yii-application/frontend/web/js/libraries/jquery/jquery-1.11.3.min.js"></script>
  <script src="/yii-application/frontend/web/js/libraries/flex/jquery.bxslider.min.js"></script>
  <script src="/yii-application/frontend/web/assets/e3dc96ac/js/bootstrap.min.js"></script>
  <script src="/yii-application/frontend/web/js/libraries/jquery-ui/jquery-ui.min.js"></script>
  <script src="/yii-application/frontend/web/js/searchResult.js"></script>
  <script src="/yii-application/frontend/web/js/Flight.js"></script>

like below!!!!

Collectives™ on Stack Overflow

AngularJS - Jquery Slider loading

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related