jQuery Carousel with Angular ng-repeat

伯鸿达
2023-12-01

问题: 在使用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/
 类似资料: