How to Rebuild owl carousel on ng-click in angular.js? - html

Question

I am facing some serious issue, I used owl carousel in angular.js. Its working fine on first time. Later i have a buttons on the same page i want to rebuild the owl carousel on that particular button with new data. here is my controller and html code.
.directive('riskcarousel', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
var syncPosition = function (event) {
var nav = this;
var body = $('#risk_body').data('owlCarousel');
$timeout(function () {
body.to(nav._current);
scope.setPhaBackgroundColor(nav._current);
}, 1000);
};
//console.log(owlCarousel,"Smartdata");
var owl = $(element.parent()).owlCarousel({
items: 3,
nav: false,
dots: false,
center: true,
responsive: {
0: {
items: 3,
nav: false
},
600: {
items: 3,
nav: false
},
1000: {
items: 3,
nav: false
}
},
onDragged: syncPosition
});
//owl.data().owlCarousel.addItem('<a class="item link center-owl-item" style="background-color: transparent;"></a>', owl.data().owlCarousel.num.items - 1);
//owl.data().owlCarousel.addItem('<a class="item link center-owl-item" style="background-color: transparent;"></a>', owl.data().owlCarousel.num.items - 1);
//owl.data().owlCarousel.reset(owl.data().owlCarousel.num.items-1);
$timeout(function () {
owl.data().owlCarousel.to(0);
//owl.data().owlCarousel.removeItem(owl.data().owlCarousel.num.items-1);
//owl.data().owlCarousel.removeItem(owl.data().owlCarousel.num.items-1);
}, 10);
}
element.on('click', function () {
//$('.owl-item').removeClass('selected-item');
//element.parent().addClass('selected-item');
alert('hello');
var index = element.attr('data-index');
var nav = $('#risk_nav').data('owlCarousel');
var body = $('#risk_body').data('owlCarousel');
$timeout(function () {
nav.to(index);
body.to(index);
scope.setPhaBackgroundColor(index);
}, 10);
});
}
}
})
.directive('riskCarouselBody', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
var syncPosition = function (event) {
var nav = $('#risk_nav').data('owlCarousel');
var body = this;
$timeout(function () {
nav.to(body._current);
scope.setPhaBackgroundColor(body._current);
}, 10);
};
var owl = $(element.parent()).owlCarousel({
items: 1,
nav: false,
dots: false,
responsive: {
0: {
items: 1,
nav: false
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: false
}
},
onDragged: syncPosition
});
}
}
}
})
Html code
<div ng-repeat="s_disease in sub_diseases"
style="float: left; border-radius: 50%; height: 50px; width: 50px; margin: 2px;"
ng-class="[s_disease.background , s_disease.class, 'sub_diseases_clicked']">
<img ng-src="http://localhost:3000/uploads/{{s_disease.icon}}" style="width: 50px; height: 50px"
ng-click="getSubDiseasesPHA(s_disease.id) ">
</div>
</div>
<div class="pha-carousel">
<div class="pha-back">
<a class="carousel-icon" href="#/qsummary"><i class="ion-chevron-left"
style="color: rgba(255, 255, 255, 1);"></i></a>
</div>
<div class="owl-carousel" id="risk_nav">
<a class="item link center-owl-item" data-index="{{$index}}" ng-repeat="pha in phas"
ng-class="[pha.background, pha.class]"
ng-style="pha.key_string=='qscore' && {'background-color': pha.background}"
riskcarousel><h1 style="white-space:normal !important;">{{pha.health_area}}</h1></a>
</div>
</div>

Answer 1

I made a carousel initialize function and calls when controller initialize
$scope.initializeCaraousel = function () {
//Check if already carousel made then destroy
if (typeof $("#sync1").data('owlCarousel') != 'undefined') {
$("#sync1").data('owlCarousel').destroy();
$('#sync2').data('owlCarousel').destroy();
}
var sync1 = $("#sync1");
var sync2 = $("#sync2");
sync1.owlCarousel({
singleItem : true,
slideSpeed : 1000,
navigation: true,
pagination:false,
afterAction : syncPosition,
responsiveRefreshRate : 200
});
sync2.owlCarousel({
items : 3,
itemsDesktop : [1199,10],
itemsDesktopSmall : [979,10],
itemsTablet : [768,8],
itemsMobile : [479,4],
pagination:false,
responsiveRefreshRate : 100,
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el){
var current = this.currentItem;
console.log(current);
$("#sync2")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced")
if($("#sync2").data("owlCarousel") !== undefined){
center(current)
}
// code for smooth transition
this.owl.owlItems.removeClass('smooth-slide');
$(this.owl.owlItems[this.owl.currentItem]).addClass('smooth-slide');
}
$("#sync2").on("click", ".owl-item", function(e){
// e.preventDefault();
var id = $(this).attr("id");
//console.log(id);
var index = parseInt(e.target.id);
//console.log(index);
sync1.trigger("owl.goTo", index);
});
function center(number){
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in sync2visible){
if(num === sync2visible[i]){
var found = true;
}
}
if(found===false){
if(num>sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", num - sync2visible.length+2)
}else{
if(num - 1 === -1){
num = 0;
}
sync2.trigger("owl.goTo", num);
}
} else if(num === sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", sync2visible[1])
} else if(num === sync2visible[0]){
sync2.trigger("owl.goTo", num-1)
}
}
}