我有一个指令,它呈现一个带有loop
选项设置为的猫头鹰轮播true
。轮播中的每个项目都链接到一个ng-click
事件。然而,作为loop
选项true
,carousel 将每个项目克隆到 carousel 中以产生循环错觉。这些克隆的项目未附加到控制器范围。
这就是我正在使用的
js
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>
这是一个带有代码的笨蛋
如何重新渲染或链接范围到新的克隆项目?