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?

Answer 1

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)