问题: 在使用ng-repeat循环加载一组图片时,carousel图片轮播插件失效
原因 : jquery 获取DOM元素需要在ng-repeat循环加载渲染结束后进行。参考内容
解决方法1 : 利用directive实现, 指令可以重用
angular.module('myApp', []).directive('owlCarousel', function () {
return {
restrict: 'E',//作用于每一个元素
link: function (scope, element, attrs) {
var options = scope.$eval($(element).attr('data-options'));//获取data-options属性值
$(element).owlCarousel(options);//初始化owlCarousel插件
}
};
});
2.. 在HTML中使用新标签
<owl-carousel class="owl-carousel"
data-options="{autoPlay: 5000, stopOnHover: true,slideSpeed : 300,
paginationSpeed : 400, singleItem : true}"> //设置图片轮播属性
<ul><li ng-repeat="pic in pics">
<img src="{{pic.url}}"/>
</li></ul>
</owl-carousel>
解决方法2 : 利用ng-init快速实现,无法重用 [参考]
<ul id="owl-example"><li ng-repeat="pic in pics" ng-init="$last ? initOwlCarousel() : null">
<img src="{{pic.url}}"/>
</li></ul>
$scope.pics = ['a.jpg', 'b.jpg', 'c.jpg'];
$scope.initOwlCarousel = function(){
$(document).ready(function(){
var options = "{autoPlay: 5000, stopOnHover: true,slideSpeed : 300,
paginationSpeed : 400, singleItem : true}" ;
$("#owl-example").owlCarousel(options);
});
}
备注
scope.$eval
,是执行当前作用域下的表达式,如:scope.$eval('a+b');
而这个里的a,b是来自 scope = {a: 2, b:3};