角度貓頭鷹旋轉木馬與循環克隆項目超出範圍

我有一個指令，使貓頭鷹傳送帶loop選項設置爲true。傳送帶中的每個項目都鏈接到ng-click事件。但是，由於loop選項是true，傳送帶將每個項目克隆到傳送帶中以產生循環錯覺。這些克隆的項目不附加到控制器範圍。角度貓頭鷹旋轉木馬與循環克隆項目超出範圍

這是我使用

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與代碼

我如何重新呈現或鏈接範圍到新的克隆項目？

來源

2016-01-21 Leo

這是一個jQuery庫這通常意味着它不會發揮好與AngularJS。我遇到過很多像這樣的問題，直到我訴諸不同的圖書館。 –

但是沒有辦法在渲染後如何綁定控制器範圍？就像在jquery上使用$（「。owl-carousel」）。on（'click'，function（）{}）; – Leo

你最終找到了解決方案，我遇到了類似的問題與貓頭鷹旋轉木馬 – Serge

唯一的工作方式是在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); 
    }; 
    } 
};

}]）

來源

2016-06-04 03:11:59 MatD

角度貓頭鷹旋轉木馬與循環克隆項目超出範圍

回答

相關問題