jquery - AngularJS - Jquery slider 加载

Question

我正在尝试在 angularjs 的部分中使用 jquery 插件。

指令:

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>  

输出显示 bxSlider() 已成功在该指令上运行。但列表和/或标签未被触及。只使用普通的 AngularJS 代码，但不使用 jQuery 插件。

我做错了什么？

Answer 1

我认为问题在于时机。 “slideit”指令在渲染列表之前被调用，之后它被 ngRepeat 再次完全重绘，而 bxSlider 甚至不怀疑这种情况正在发生。

只是为了验证这个假设(不要在生产中使用它，因为它非常丑陋，如果你的模型发生变化甚至可能不起作用)尝试:

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

这里有一个更大的问题:您尝试使用 Angular 和 JQuery“编译”HTML，但它们不一定兼容。为了避免冲突，我建议在指令内手动渲染列表，然后在动态构建的 DOM 上调用 bxSlider。虽然不太漂亮，但应该更稳定。例如:

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

指令:

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'
            });
        });
    };
});

(我没有测试过，这只是一个想法)