Angularjs: update location without triggering route

Question

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.

possible duplicate of Change route parameters without updating view — Stewie
– Stewie, Commented Dec 2, 2013 at 8:25
@stewie, Query params are not appropriate for what I'm doing (I'm creating a URI, not filtering results). I ended up having to switch to ui.router. — Jakob Jingleheimer
– Jakob Jingleheimer, Commented Dec 7, 2013 at 7:34

Erik Honn · Accepted Answer · 2013-12-02 08:23:26Z

4

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.

answered Dec 2, 2013 at 8:23

Erik Honn

7,5665 gold badges36 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jakob Jingleheimer Over a year ago

Would this work with a link? <a href="?p=1"><img/></a> ? I started to look into ui-router, but it's in alpha/beta release :s

Erik Honn Over a year ago

Not sure, I should considering angular intercepts a-tags in general.

Jakob Jingleheimer Over a year ago

I ended up switching to ui.router. Thanks for the suggestion!

Chris Pfohl Over a year ago

The problem with this solution is that if you navigate directly to /foo/photos/sports?page={{$index+1}} it clears the search terms.

Erik Honn Over a year ago

It shouldn't (and doesn't for me). You sure you have nothing else that is removing your params?

Collectives™ on Stack Overflow

Angularjs: update location without triggering route

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related