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/