AngularJS - jquery滑块加载

我想在angularjs中使用一个jQuery插件中的一个部分。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插件。

我在做什么错了？

来源

2013-01-07 Marek123

我相信问题是与时间有关。在你的列表被渲染之前调用“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' 
      }); 
     }); 
    }; 
});

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

来源

2013-01-07 17:34:56 pavelgj

会试试看。谢谢你的解释。 – Marek123

确保检查images.length大于0。 –

想通了：
添加以下指令：

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

来源

2013-01-07 17:16:47 Marek123

这工作。它在指令中有一个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。

来源

2013-01-07 17:27:40 asgoth

检查它，没有工作。 An}失踪，但即使没有错误，标签也不是“bxSlider”编辑的。只是一个额外的跨度标签在那里......奇怪。 – Marek123

在答案中增加了一个plnkr。图像显示，但仍然太多子弹。 – asgoth

修正了它。解决方案是使用elm.ready（），在其中分配图像（幻灯片）和启动bxslider。见plnkr。 – asgoth

只是维护文件的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>

像下面!!!!

来源

2015-08-10 05:43:44 mohsen

AngularJS - jquery滑块加载

回答

相关问题