無需重新加載控制器即可更新路線

Question

我有給定汽車ID的詳細信息頁面，該頁面包含照片列表（服務返回），用戶可以單擊這些照片以查看它們。

我想生成一個URL，以便用戶可以與所選的名片，照片和默認打開的所選照片共享頁面

不需要重新加載頁面，因為我已經裝載了汽車，僅當用戶單擊縮略圖時，我才想致電服務中心以獲取所選的照片詳細信息。

我希望我的解釋有助於理解問題。 這是我的代碼

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) {

        /*
            List all the photos with carId = car.id
            and the user can click to see a specific image ($scope.selectPhoto)
        */
    });

    $scope.selectPhoto = function(photoId) {

        /*
            clicking on any photo should update
            the URL to /cars/{car.id}/{photoId}
            I tried with $location.search('photoId', photoId); but it adds a querystring, not a URL segment change.
        */
    }

    if ($routeParams.photoId) {
        PhotosFactory.get({id: $routeParams.photoId}).$promise.then(function(photo) {
            console.log('Default photo: ' + photo);
        });
    }
}

謝謝。

Answer 1

在頁面中生成鏈接並在單擊圖像時顯示鏈接可能會更容易：

<img ng-click="showDiv = !showDiv" src="..." />

<div ng-show="showDiv" >
    <a href="/url_part1/{value1}/url_part2/{value2}">link</a>
</div>

Answer 2

要更改網址路徑（或“段”），可以使用$location.path('/cars/'+car.id+'/'+photoId).replace() 。

使用ngRoute處理路由時，Angular應攔截位置更改並防止重新加載頁面。 路線參數將與"/cars/:carId/:photoId?" ，加上“？” 將最終參數設為可選。 多虧了.replace() ，用戶不必單擊所有照片。