jQuery Carousel with Angular ng-repeat

jQuery Carousel with Angular ng-repeat

问题： 在使用ng-repeat循环加载一组图片时，carousel图片轮播插件失效

原因 : jquery 获取DOM元素需要在ng-repeat循环加载渲染结束后进行。参考内容

解决方法1 ： 利用directive实现, 指令可以重用

1. add 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);    });}

---

备注

1. scope.$eval，是执行当前作用域下的表达式，如：scope.$eval('a+b'); 而这个里的a,b是来自 scope = {a: 2, b:3};
2. owl carousel 插件官网: http://owlgraphic.com/owlcarousel/