我已经开发了以下指令,它适用于owl carousal。
appController.directive("owlCarousel", function() {
return {
restrict: 'E',
transclude: true,
scope:{
item: '=data',
rate:'&rate'
},
link: function (scope) {
// console.log(scope);
scope.$watchCollection('item', function(newValue, oldValue) {
console.log(newValue);
console.log(oldValue);
if (newValue)
console.log("I see a data change!");
});
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);
$(element).parent().parent().find('.next').click(function(){
$(element).trigger('owl.next');
});
$(element).parent().parent().find('.prev').click(function(){
$(element).trigger('owl.prev');
});
};
},
template:'<div class="owl-carousel" data-options="{items : 5, pagination: false, rewindNav : false,responsiveClass:true}"><div owl-carousel-item="" ng-repeat="(i,c) in item" class="item"><div class="col-md-12"><div class="game-box "><a href="gamepage.html"><img src="<?php echo base_url();?>{{c.url}}" alt="Act 01"></a><div class="game-box-info"><h5>{{ c.long_name }}</h5><p>{{ c.publisher }}</p><span class="rate pull-left" ><i class="fa fa-star" ng-repeat="i in rate({n:c.rating})"></i></span><span class="Free pull-right"><a href="#">FREE</a></span></div><div class="clearfix"></div></div></div></div></div>'
};
}).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是
<data-owl-carousel data='slide1' rate="ratings(n)"></data-owl-carousel>
现在我想从以下ng-click
更新指令html<a ng-repeat="catChild in cat.childrens" ng-click="slide1 = getContent(catChild.category_id,0,6,1,0)" href="#"> {{ catChild.category_name }}</a>
我已经应用了范围。$ watchCollection但它只在链接函数中第一次调用