带有循环的角猫头鹰轮播克隆项目超出范围答案

【问题标题】：Angular Owl carousel with loop clones items out of scope带有循环的角猫头鹰轮播克隆项目超出范围
【发布时间】：2016-01-21 11:23:05
【问题描述】：

我有一个指令可以渲染一个猫头鹰轮播，其中loop 选项设置为true。轮播中的每个项目都链接到 ng-click 事件。然而，由于loop 选项是true，carousel 将每个项目克隆到 carousel 中以产生循环错觉。这些克隆的项目没有附加到控制器范围。

这就是我正在使用的

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.items1 = [1,2,3,4,5];
  $scope.items2 = [1,2,3,4,5,6,7,8,9,10];
  $scope.a = function(i){
    alert(i);
  }
}).directive("owlCarousel", function() {
    return {
        restrict: 'E',
        transclude: false,
        link: function (scope) {
            scope.initCarousel = function(element) {
              // provide any default options you want
                var defaultOptions = {
                };
                var customOptions = scope.$eval($(element).attr('data-options'));
                // combine the two options objects
                for(var key in customOptions) {
                    defaultOptions[key] = customOptions[key];
                }
                // init carousel
                $(element).owlCarousel(defaultOptions);
            };
        }
    };
})
.directive('owlCarouselItem', [function() {
    return {
        restrict: 'A',
        transclude: false,
        link: function(scope, element) {
          // wait for the last item in the ng-repeat then call init
            if(scope.$last) {
                scope.initCarousel(element.parent());
            }
        }
    };
}]);

html

<body ng-controller="MainCtrl">
    <data-owl-carousel class="owl-carousel" data-options="{loop:true}">
      <div owl-carousel-item="" ng-repeat="item in ::items1" class="item">
        <a ng-click="a($index)">{{::item}}</a>
      </div>
    </data-owl-carousel>
  </body>

这是带有代码的plunker

如何重新渲染或链接范围到新的克隆项目？

【问题讨论】：

这是一个 jQuery 库，这通常意味着它无法与 AngularJS 配合使用。在求助于不同的图书馆之前，我遇到了很多这样的问题。
但是有没有办法在渲染后绑定控制器范围？就像在 jquery 上使用 $(".owl-carousel").on('click',function(){});
你终于找到解决方案了吗，我在 owl-carousel 遇到了类似的问题

标签： javascript angularjs angularjs-directive owl-carousel owl-carousel-2

【解决方案1】：

唯一可行的方法是在 scope.initCarousel 函数中使用 $timeout。我知道这不是最好的解决方案。

这里是plunker 固定

.directive("owlCarousel", ['$timeout',function($timeout) {
return {
    restrict: 'E',
    transclude: false,
    link: function (scope) {
        scope.initCarousel = function(element) {
           $timeout(function () {
              // provide any default options you want
                var defaultOptions = {
                };
                var customOptions = scope.$eval($(element).attr('data-options'));
                // combine the two options objects
                for(var key in customOptions) {
                    defaultOptions[key] = customOptions[key];
                }
                // init carousel
                $(element).owlCarousel(defaultOptions);
           },50);
    };
    }
};

}])

【讨论】：