I am building an Angular application that utilizes the https://github.com/bespokejs/bespoke presentation plugin to create dynamic slides. My slides come from an ng-repeat which generates the HTML. My problem is that depending on the length of the array from which the ng-repeat reads, my slide-deck is instantiated expecting more slides then there are.
For example, if I instantiate the deck on an array that has 12 items for ng-repeat, and then hit another call to pinActiveCategory() with an array of 6 items, the deck still thinks there are 12 slides, even though it will only populate 6, creating an ugly scenario where my user is cycling through empty slides.
My view:
<div id="left" ng-class="butterfly">
<div id="carousel">
<article>
<section ng-repeat="carousel in theminiBreadsList">
<img ng-src="img/{{carousel.type|lowercase|nospace}}big.jpg">
<p class="breadDescribe"><span class="buttons"><i ng-click="pinActiveBread($event,carousel.text)" class="fa fa-arrows-alt"></i><i ng-click="initiateCart()" class="fa fa-cart-plus"></i><i class="fa fa-question"></i></span><span class="carousel-text"><u>{{carousel.text}}</u></span></p></section>
</article>
</div>
</div>
My controller:
$scope.pinActiveCategory = function($event, category) {
$scope.show.push('show');
for (var i = 0; i < $scope.theBreadsList.length; i++) {
if ($scope.theBreadsList[i].category == category) {
$scope.theminiBreadsList = angular.copy($scope.theBreadsList[i].breads);
$scope.butterfly.push("show");
$scope.$watch("theminiBreadsList", function(newValue, oldValue) {
var butterfly = function() {
$timeout(function() {
$(".bespoke-active img").css("transform", "scale(1.0)");
$(".bespoke-before img").css("transform", "scale(1.1)");
$(".bespoke-after img").css("transform", "scale(1.1)");
$scope.theActiveLoaf = $(".bespoke-active .carousel-text").text();
function isDaily(nameKey, myArray) {
for (var i = 0; i < myArray.length; i++) {
for (var z = 0; z < myArray[i].breads.length; z++) {
if (myArray[i].breads[z].text === nameKey) {
$scope.isTheActiveBreadDaily = myArray[i].breads[z].isDaily;
}
}
}
}
isDaily($scope.theActiveLoaf, $scope.theBreadsList);
}, 999);
};
var deck = bespoke.horizontal.from('#carousel article', {
fx: {
direction: "horizontal",
transition: "carousel"
}
});
butterfly();
deck.on('activate', function(event) {
butterfly();
});
});
}
}
},
I know that the problem has to do with when the bespoke command runs relative to when the scope is updated with the new theminiBreadsList I'm just not sure what to do to solve it. I tried moving around the code-block that starts the slide-deck, but that didn't do anything useful, I just ended up breaking more of it than fixing anything, so I'm looking for another set of eyes for some help, thank you!
Edit: Basically I'm looking for an answer that helps me call the deck variable (starting the slideshow) at the right time so that it knows how many section elements and therefore how many slides there should be.
