I have a specific detail page dedicated to each car ID, on this page, there is a gallery of photos fetched from the service. Users can click on these photos to view them in full size.
I am looking to create a shareable URL that includes the selected car, photos, and highlights the chosen photo by default.
Reloading the entire page is unnecessary since I already have the car information loaded. My goal is to only retrieve details for the selected photo when a user clicks on one of the thumbnails.
I hope this explanation clarifies the issue at hand. Below is the code snippet:
function CarsController($scope, $routeParams, $location, CarsFactory, PhotosFactory) {
CarsFactory.get({id: $routeParams.id}).$promise.then(function(car) {
console.log(car);
});
PhotosFactory.query({carId: car.id}).$promise.then(function(photos) {
/*
Display all photos with carId = car.id
allowing users to click and view a specific image ($scope.selectPhoto)
*/
});
$scope.selectPhoto = function(photoId) {
/*
When any photo is clicked, update the URL to /cars/{car.id}/{photoId}
Attempted using $location.search('photoId', photoId); however, it adds a query string instead of changing the URL segment.
*/
}
if ($routeParams.photoId) {
PhotosFactory.get({id: $routeParams.photoId}).$promise.then(function(photo) {
console.log('Default photo: ' + photo);
});
}
}
Thank you.