angularjs – Owl Carousel无法识别ng-repeat的元素

发布时间：2020-12-17 07:35:12 所属栏目：安全来源：网络整理

导读：我正试图让 owl carousel在Angular中工作. 我想在我看来这样做标记,因为我有很多画廊： owl-carousel owl-options="owlOptions" div ng-repeat="image in gallery" class="item" phello/p /div/owl-carousel 基本上所有指令应该做的是转盘的初始化.该指令完

我正试图让 owl carousel在Angular中工作.

我想在我看来这样做标记,因为我有很多画廊：

<owl-carousel owl-options="owlOptions">
  <div ng-repeat="image in gallery" class="item">
    <p>hello</p>
  </div>
</owl-carousel>

基本上所有指令应该做的是转盘的初始化.该指令完美无缺,除非我使用ng-repeat.我猜这个指令是在处理ng-repeat之前加载的.

有没有人对如何解决这个问题有任何想法,而不为每种类型的滑块构建模板和指令？

非常感谢！

这是指令：

angular.module('dir.owlCarousel',[])
  .directive('owlCarousel',[function() {
    return {
      restrict: 'EA',transclude: false,scope: {
        owlOptions: '='
      },link: function(scope,element,attrs) {
        $(element).owlCarousel(scope.owlOptions);
      }

    };
  }]);

你想看看这些答案：

ng-repeat finish event

AngularJS event for when model binding or ng-repeat is complete?

angular.module('dir.owlCarousel',attrs) {
          scope.initCarousel = function() {
            $(element).owlCarousel(scope.owlOptions);
          };
        }
      }
    };
  }])
  .directive('owlCarouselItem',[function() {
     return function(scope) {
     if (scope.$last) {
        scope.initCarousel();
     }
    };
  }]);

<owl-carousel owl-options="owlOptions">
  <div owl-carousel-item ng-repeat="image in gallery" class="item">
    <p>hello</p>
  </div>
</owl-carousel>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!