猫头鹰旋转木马识别不NG-重复元素 [英] Owl Carousel not identifying elements of ng-repeat

问题描述

我试图让猫头鹰旋转木马在角工作。

我想类似这样的标记在我看来，因为我有许多画廊：

 ＆LT;猫头鹰传送带猫头鹰选项=owlOptions＆GT;
  ＆LT; D​​IV NG重复=图像库级=项＆GT;
    ＆所述p为H.;你好＆下; / P＆GT;
  ＆LT; / DIV＆GT;
＆LT; /猫头鹰传送带＆GT;
 

基本上所有的指令应该做的是initalizing转盘。该指令完美的作品，除非我使用一个NG重复。我猜是被处理的NG-重复之前的指令加载。

有没有人对如何解决这个任何想法，而不建筑模板和指令滑块的每一个风格？

感谢你了！

下面是指令：

  angular.module（'dir.owlCarousel'，[]）
  .directive（'owlCarousel'，[功能（）{
    返回{
      限制：EA，
      transclude：假的，
      范围： {
        owlOptions：'='
      }，      链接：功能（范围，元素，ATTRS）{
        $（元素）.owlCarousel（scope.owlOptions）;
      }    };
  }]）;
 

解决方案

您想看看这些答案是：

NG-重复完成事件

<一个href=\"http://stackoverflow.com/questions/19864007/angularjs-event-for-when-model-binding-or-ng-repeat-is-complete\">AngularJS事件时，模型绑定或NG重复完成？

  angular.module（'dir.owlCarousel'，[]）
  .directive（'owlCarousel'，[功能（）{
    返回{
      限制：EA，
      transclude：假的，
      范围： {
        owlOptions：'='
      }，
      链接：功能（范围，元素，ATTRS）{
          scope.initCarousel =功能（）{
            $（元素）.owlCarousel（scope.owlOptions）;
          };
        }
      }
    };
  }]）
  .directive（'owlCarouselItem'，[功能（）{
     复位功能（适用范围）{
     如果（范围。$最后一个）{
        scope.initCarousel（）;
     }
    };
  }]）;＆LT;猫头鹰传送带猫头鹰选项=owlOptions＆GT;
  ＆LT; D​​IV猫头鹰传送带项NG重复=图像库级=项＆GT;
    ＆所述p为H.;你好＆下; / P＆GT;
  ＆LT; / DIV＆GT;
＆LT; /猫头鹰传送带＆GT;
 

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>

这篇关于猫头鹰旋转木马识别不NG-重复元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！