My Attempt:
$routeProvider
.when('/paintings',
{
controller: 'imageController' , 'getPaintingImages'
templateUrl: 'paintings.html'
})
.when('/foods',
{
controller: 'imageController' , 'getFoodImages'
templateUrl: 'food.html'
})
I attempted to use getPaintingImages and getFoodImages to retrieve the list of paintings/foods from a factory, with imageController handling image manipulation. However, only the first controller is being called.
Prior to this, I had written code in imageController like this:
myWebsite.controller('imageController', function imageController($scope, getPaintings){
$scope.images = getPaintings.images(); // but need to make this work for different set of images
$scope.imageCount = countObjectElements($scope.images);
$scope.selectedImage = $scope.images[0];
$scope.selectedImageIndex = 0;
$scope.updateSelectedImage = function(img) {
$scope.selectedImage = img;
$scope.selectedImageIndex = $scope.images.indexOf(img);
};
$scope.updateSelectedImageIndex = function(val) {
alert($scope.imageOf);
if($scope.selectedImageIndex <= 0)
$scope.selectedImageIndex = $scope.imageCount;
$scope.selectedImageIndex = ($scope.selectedImageIndex + val) % $scope.imageCount;
$scope.selectedImage = $scope.images[$scope.selectedImageIndex];
};
});
Being new to angularJS, I'm unsure if creating multiple controllers is the solution for reusing imageController. If it is, how can I achieve this? If not, how can I modify imageController to handle different sets of images effectively? When it comes to functions, parameter passing allows for reusability. But in the case of controllers, I am puzzled on how parameters can be passed as they are internally called for a view.