The concern
I am looking to integrate this image carousel in multiple locations on the same page using the same directive. However, it appears that they are currently sharing the same scope.
For example:
When I click the arrow icons to navigate to the next image, all instances of the carousel trigger simultaneously. How can I prevent this from happening?
Thank you in advance.
JavaScript code snippet
productDetail.directive('imageSwitcher',
['$rootScope', '$resource', '$timeout', 'app_settings', 'mainConfig',
function($rootScope, $resource, $timeout, app_settings, mainConfig) {
var gridData = {
imgCount : 0,
currentImage : 0,
nextImage : 1,
prevImage : 1
}
var actions = {
setCurrentImage : function(ind) {
gridData.currentImage = ind > (gridData.imgCount - 1)
? 0
: ind < 0
? (gridData.imgCount - 1)
: ind;
gridData.nextImage = (gridData.currentImage + 1) > (gridData.imgCount - 1)
? 0
: (gridData.currentImage + 1) < 0
? (gridData.imgCount - 1)
: (gridData.currentImage + 1);
gridData.prevImage = (gridData.currentImage - 1) > (gridData.imgCount - 1)
? 0
: (gridData.currentImage - 1) < 0
? (gridData.imgCount - 1)
: (gridData.currentImage - 1);
}
}
return {
replace: true,
templateUrl: '/image-switcher.html',
scope : {
pr : '=imageSwitcher'
},
link: function(scope, element, attrs) {
scope.actions = actions;
scope.gridData = gridData;
scope.locale = locale;
gridData.imgCount = scope.pr.prodData.productImageUrls.imgArray.length;
var resetImageData = function() {
gridData.imgCount = scope.pr.prodData.productImageUrls.imgArray.length;
actions.setCurrentImage(gridData.currentImage);
};
$rootScope.$watch('hasBrokenImages', function(){
for (var i = 0; i < $rootScope.brokenImages.length; i++) {
var ind = scope.pr.prodData.productImageUrls.imgArray.indexOf($rootScope.brokenImages[i], 0);
if (ind > -1) {
scope.pr.prodData.productImageUrls.imgArray.splice(ind, 1);
};
};
resetImageData();
})
scope.$watch('pr.prodData.currentColorCode', function(newVal, oldVal){
scope.$evalAsync(function(e){
$timeout(function() {
resetImageData();
}, 100);
});
});
scope.$watch('pr.productId', function(newVal, oldVal){
scope.actions.setCurrentImage(0)
});
}
}
}]
);
HTML markup snippet
<div image-switcher="pr">
<div class="product-images expanded" >
<span class="fullwidth"
ng-click="actions.setCurrentImage((gridData.currentImage+1))">
<img ng-src="{{ pr.prodData.productImageUrls.imgArray[gridData.currentImage]}}"
/>
</span>
<img ng-src="{{
pr.prodData.productImageUrls.imgArray[gridData.nextImage]}}"
ng-hide="true"/>
<div class="hiddenImages" ng-hide="true">
<img ng-src="{{
pr.prodData.productImageUrls.imgArray[gridData.prevImage]}}"
/>
</div>
</div>
<div style="text-align: center;" ng-show="pr.prodData.productImageUrls.imgArray.length > 1">
<p class="img-counter">
{{gridData.currentImage + 1}}/{{gridData.imgCount}}
</p>
<p>
<a class="mini-image-switcher mis-prev icon-L_arrow"
ng-click="actions.setCurrentImage((gridData.currentImage-1))"></a>
<a class="mini-image-switcher mis-next icon-R_arrow"
ng-click="actions.setCurrentImage((gridData.currentImage+1))"></a>
</p>
</div>