CODEWITHSUNDEEP
htmlangularjsroutes
Jakob Jingleheimer
Jakob Jingleheimer

Reputation: 31590

Angularjs: update location without triggering route

I'm creating an image gallery that loads a specific image if it is specified in the route (else loads the first):

foo/photos/sports/2

Each thumbnail is wrapped in a link to cause the address to change (so users can link back to it directly):

<ul class="gallery-thumbnails">
  <li ng-repeat="piece in gallery.pieces">
    <a ng-href="/foo/photos/sports/{{$index+1}}">
      <img ng-src="{{piece.img}}" />
    </a>
  </li>
</ul>

The problem is that it causes the whole view to be re-rendered instead of just the template binded to the changed scope param (scope.gallery.selected).

I can't find a way to cancel the view re-render (but I still want $routeParams to be updated).

I've seen solutions that listen for $locationChangeSuccess, but that doesn't work for my scenario.

Upvotes: 0

Views: 1619

Answers (1)

Erik Honn
Erik Honn

Reputation: 7576

One way to get close is to use get parameters instead, going to /foo/photos/sports?page={{$index+1}} and in that route (as an argument to "when") set reloadOnSearch: false. You can then update the $location.search (the get parameters) without the page reloading and trigger things on the changes.

  // Using reloadOnSearch
  .when('/foo/photos/sports', {
    templateUrl: 'sports',
    reloadOnSearch: false
  });

  // Changing the get parameters (search part of url)
  $location.search({'page': 1});

Apart from that I don't think you can do it with the default angular router. It always reloads all controllers on a routechange. You could however switch to another router such as ui-router which I believe can handle reloading parts of a view on path-change.

Upvotes: 4

Related Questions