我在
AngularJS应用程序中使用
Slick转盘.为此我创建了如下指令：
myApp.directive('slickSlider',function(){
return {
restrict: 'A',link: function(scope,element,attrs) {
$(element).slick(scope.$eval(attrs.slickSlider));
}
}
});
这是我的视图文件中的代码：
<div class="clearfix"
slick-slider="{dots: false,arrows: true,draggable:
false,slidesToShow:3,infinite:false}">
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
</div>
在这种情况下,它正常工作正常并正确初始化.
但是当我使用ngRepeat动态创建幻灯片时,它不是初始化,而是一个接一个地显示幻灯片.
这是我的代码使用ngRepeat
<div class="clearfix"
slick-slider="{dots: false,infinite:false}">
<div class="my-slide" ng-repeat="slide in slides">
<a><img ng-src="assets/img/{{slide.img}}"/></a>
</div>
</div>
任何建议,我该如何解决？
解决方法
我怀疑光滑的插件可能需要DOM被完全渲染才能正常工作.
尝试：
myApp.directive('slickSlider',function($timeout){
return {
restrict: 'A',attrs) {
$timeout(function() {
$(element).slick(scope.$eval(attrs.slickSlider));
});
}
}
});