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

前端之家收集整理的这篇文章主要介绍了angularjs – Owl Carousel无法识别ng-repeat的元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正试图让 owl carousel在Angular中工作.

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

  1. <owl-carousel owl-options="owlOptions">
  2. <div ng-repeat="image in gallery" class="item">
  3. <p>hello</p>
  4. </div>
  5. </owl-carousel>

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

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

非常感谢!

这是指令:

  1. angular.module('dir.owlCarousel',[])
  2. .directive('owlCarousel',[function() {
  3. return {
  4. restrict: 'EA',transclude: false,scope: {
  5. owlOptions: '='
  6. },link: function(scope,element,attrs) {
  7. $(element).owlCarousel(scope.owlOptions);
  8. }
  9.  
  10. };
  11. }]);
你想看看这些答案:

ng-repeat finish event

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

  1. angular.module('dir.owlCarousel',attrs) {
  2. scope.initCarousel = function() {
  3. $(element).owlCarousel(scope.owlOptions);
  4. };
  5. }
  6. }
  7. };
  8. }])
  9. .directive('owlCarouselItem',[function() {
  10. return function(scope) {
  11. if (scope.$last) {
  12. scope.initCarousel();
  13. }
  14. };
  15. }]);
  16.  
  17. <owl-carousel owl-options="owlOptions">
  18. <div owl-carousel-item ng-repeat="image in gallery" class="item">
  19. <p>hello</p>
  20. </div>
  21. </owl-carousel>

猜你在找的Angularjs相关文章