After studying an example of a directive here, I noticed that they used <a href="#" ... to insert a new image into the container div. I attempted to replicate this functionality in my own directive, but clicking on my images does not change the content of my pictBox div. Is there something missing in my CSS file? Why is the background-image text present there? Here is the code for my directive:
app.directive('smallPictureBox', [function(){
return {
restrict: 'CA',
replace: false,
transclude: false,
scope: {
index: '=index',
item: '=itemdata'
},
template: '<a href="#"><img src="{{item.url}}"/></a>',
link: function(scope, elem, attrs) {
if (parseInt(scope.index)==0) {
angular.element(attrs.options).css({'background-image':'url('+ scope.item.url +')'});
}
elem.bind('click', function() {
var src = elem.find('img').attr('src');
angular.element(attrs.options).css({'background-image':'url('+ scope.item.url +')'});
});
}
}
}]);
This is what my HTML looks like:
<div class="shadow">
<div class="pictureBox">
<div id="pictBox">
<img ng-src="{{primaryImage.url}}">
</div>
</div>
<div class="lowerPictureBox">
<div ng-repeat="image in item.images" options='#pictBox' itemdata='image' index="$index" class="smallPictureBox">
<img ng-src="{{image.url}}">
</div>
</div>
</div>
How can I ensure that clicking on a picture in the lowerPictureBox will display it in the pictureBox?