Owl Carousel 没有识别 ng-repeat 的元素 [英] Owl Carousel not identifying elements of ng-repeat

问题描述

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

我想像这样标记，因为我有很多画廊:

<div ng-repeat="图库中的图片" class="item"><p>你好</p>

</owl-carousel>

基本上所有指令应该做的是初始化轮播.该指令完美运行，除非我使用 ng-repeat.我猜该指令正在处理 ng-repeat 之前加载.

有没有人知道如何在不为每种样式的滑块构建模板和指令的情况下解决这个问题?

非常感谢！

这是指令:

angular.module('dir.owlCarousel', []).directive('owlCarousel',[function() {返回 {限制:'EA'，转置:假，范围: {owlOptions: '='},链接:功能(范围，元素，属性){$(element).owlCarousel(scope.owlOptions);}};}]);

解决方案

你想看看这些答案:

ng-repeat 结束事件

AngularJS 事件，用于模型绑定或ng-repeat 完成了吗?

angular.module('dir.owlCarousel', []).directive('owlCarousel',[function() {返回 {限制:'EA'，转置:假，范围: {owlOptions: '='},链接:功能(范围，元素，属性){scope.initCarousel = function() {$(element).owlCarousel(scope.owlOptions);};}}};}]).directive('owlCarouselItem',[function() {返回函数(范围){如果(范围.$last){scope.initCarousel();}};}]);<owl-carousel owl-options="owlOptions"><div owl-carousel-item ng-repeat="画廊中的图像" class="item"><p>你好</p>

</owl-carousel>

I'm trying to get owl carousel to work in Angular.

I want to markup like this in my view, since I have many galleries :

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

Basically all the directive should be doing is initalizing the carousel. The directive works perfectly, unless I use an ng-repeat. I'm guessing the directive is loading before the ng-repeat is being processed.

Does anyone have any ideas on how to solve this without building templates and directives for every style of slider?

Thank you so much!

Here is the directive:

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

      link: function(scope, element, attrs) {
        $(element).owlCarousel(scope.owlOptions);
      }

    };
  }]);

解决方案

You want to take a look at these answer:

ng-repeat finish event

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

angular.module('dir.owlCarousel', [])
  .directive('owlCarousel',[function() {
    return {
      restrict: 'EA',
      transclude: false,
      scope: {
        owlOptions: '='
      },
      link: function(scope, element, 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>

这篇关于Owl Carousel 没有识别 ng-repeat 的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！