コントローラを再ロードせずに経路を更新する

Question

のページには という写真のリストが含まれており、ユーザーはそれらの写真をクリックして見ることができます。

私はちょうど私は、ユーザーが、選択した カードで写真をページを共有することができるように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

URLパス（または「セグメント」）を変更するには$location.path('/cars/'+car.id+'/'+photoId).replace()を使用することができます。

ngRouteでルーティングを処理すると、Angularはロケーションの変更を傍受し、ページのリロードを防止する必要があります。ルートパラメータは"/cars/:carId/:photoId?"と一致し、 "？"最終的なパラメータをオプションにします。 .replace()のおかげで、ユーザーはすべての写真をクリックする必要はありません。