AngularJS - Jquery 滑块加载答案

【问题标题】：AngularJS - Jquery Slider loadingAngularJS - Jquery 滑块加载
【发布时间】：2013-01-07 16:13:39
【问题描述】：

我正在尝试在 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 插件。

我做错了什么？

【问题讨论】：

标签： jquery slider angularjs

【解决方案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'
            });
        });
    };
});

（我没有测试过，这只是一个想法）

【讨论】：

会尝试一下。谢谢你的解释。
一定要检查images.length是否大于0。

【解决方案2】：

这行得通。它在指令中有一个ng-repeat。 bxSlider 开始于元素的ready()。

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>

编辑：这是plnkr。

【讨论】：

检查过了，没用。缺少一个}，但即使没有错误，标签也不是“bxSlider”。那里只是一个额外的跨度标签......奇怪。
在答案中添加了 plnkr。显示了图像，但仍然有太多的子弹。
已修复。解决方案是使用 elm.ready()，您可以在其中分配图像（幻灯片）和启动 bxslider。请参阅 plnkr。

【解决方案3】：

想通了：
添加以下指令：

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

【讨论】：

【解决方案4】：

只维护文件js文件的依赖！

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

如下图！！！！

【讨论】：