I have developed a directive that utilizes the jCarousel plugin to display content loaded dynamically via ajax.
Below are snippets of my code:
Using the directive in HTML:
<div class="jcarousel" dates-carousel dates="dates"></div>
where dates is an array loaded dynamically via ajax through one of my services
The Directive
datesCarouselDirective = function() {
return {
restrict: "A",
scope: {
dates: "="
},
templateUrl: "...",
link: function($scope, $element, $attrs) {
var jcarousel = $element;
jcarousel.on("jcarousel:reload jcarousel:create", function() {
var width;
width = jcarousel.innerWidth() / 3;
return jcarousel.jcarousel("items").css("width", width + "px");
}).jcarousel({
wrap: "null"
});
$element.find(".jcarousel-control-prev").jcarouselControl({
target: "-=1"
});
$element.find(".jcarousel-control-next").jcarouselControl({
target: "+=1"
});
console.log($scope.dates); // returns []
console.log($scope.dates.length); // returns 0
}
};
};
The Directive's Template:
<ul>
<li>(ng-repeat="date in dates")
{{date.format("MMM D")}}
</li>
</ul>
<a class="jcarousel-control-prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="jcarousel-control-next">
<i class="fa fa-angle-right"></i>
</a>
Since dates within the directive is initially set to [] (it appears that the ajax data loads after the directive has been rendered), the jCarousel functionality is not working correctly. Can someone provide assistance on resolving this issue and guide me on how to ensure proper functionality of my directive or suggest any necessary refactoring?