Question

我有一个给定车辆ID的详细信息页面，该页面包含照片列表（由服务返回）并且用户可以点击这些照片来查看它们。

我想生成一个网址，以便用户可以与所选内容共享该网页卡片，照片和默认打开的所选照片

没有必要重新加载页面，因为我已经加载了汽车我只想在用户点击缩略图时调用服务来获取所选照片的详细信息。

我希望我的解释有助于理解这个问题。这是我的代码

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

要更改网址路径（或＆＃34;细分＆＃34;），您可以使用$location.path('/cars/'+car.id+'/'+photoId).replace()。

使用ngRoute处理路由，Angular应拦截位置更改并阻止页面重新加载。路线参数将与"/cars/:carId/:photoId?"对齐，其中＆＃34;？＆＃34;使最终的参数可选。感谢.replace()，用户无需点击所有照片。

更新路由而不重新加载控制器

2 个答案: