Currently utilizing angular 1.x and I've crafted a personalized directive named slider as displayed in the code below.
I am attempting to integrate the content of the slider directive using transclude so that I can modify it within the transclude function. However, the issue arises when the clone does not present a collection of .slide elements. Instead, it displays a comment related to ng-repeat. It is proving difficult to retrieve the compiled output of ng-repeat, which ideally should consist of a collection of .slide divs. I would like to understand how to access the result of ng-repeat within the transclude function in order to effectively call scope.showCurrent. Currently, the $('.slide') call inside scope.showCurrent() fails to locate any .slide divs because they are not yet present during the call. If ng-repeat could provide its compiled html within the transclude function, then $('.slide') would be able to capture the divs.
app.directive('slider', function ($compile) {
return {
restrict: 'EA',
priority: 1200,
scope: true,
controller: function ($scope) {
$scope.slider = { currentIndex: 0 };
},
transclude:'element',
link: function (scope, el, attrs, ctrl, transclude) {
scope.showCurrent = function (currentIndex) {
console.log('x')
$('.slide').hide();
$('.slide').eq(currentIndex).show();
}
scope.$watch('slider.currentIndex', function (val) {
console.log('tst');
scope.showCurrent(val);
});
transclude(scope, function (clone) {
el.after(clone);
scope.showCurrent(scope.slider.currentIndex);
})
},
}
});
The following snippet showcases how to use this directive in HTML.
<slider>
<div ng-repeat="slide in slides" class="slide">
<div>Image {{img}}</div>
<img ng-src="img"/>
</div>
</slider>
Take a look at my plunk https://plnkr.co/edit/m7YJBNuDjeLPaKkUYK5S?p=preview