Angular UI update route with different parameters

Question

Using Angular UI router, I have a route set up as follows

$stateProvider.state('edit', {
    url: '/:file/:page',
    ...
}

if I change the route from /edit/file1/page1 to /edit/file1/page2, the view doesn't refresh. I'm calling $state.go, and I can easily redraw the page, but by not running this through the router things like the back button don't update the route.

Can someone advise how to update the route so the view is updated?

Thanks.

possible duplicate of [AngularJS dynamic routing](http://stackoverflow.com/questions/13681116/angularjs-dynamic-routing) — Dalorzo, Aug 10 '14 at 20:56

score 0 · Accepted Answer · answered Aug 10 '14 at 21:43

If I understand your intention here, it is to have your templateUrl be based on the :file and :page $stateParams.

Since you haven't shown how you are actually using $state.go, I put together an example that shows a few of the ways you can change between states with and without { reload: true }.

angular.module('exampleApp', ['ui.router'])
  .config(function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/file1/page1');
    $stateProvider
      .state('edit', {
        url: '/:file/:page',
        controller: 'FilePageCtrl',
        templateUrl: function($stateParams) {
          return $stateParams.file + "-" + $stateParams.page + ".html";
        }
      });
  })
  .controller('FilePageCtrl', function($scope, $state) {});

Here are some example links that change the state (but will not re-run the controller and template if it's already the current state):

<a ui-sref="edit({ file: 'file1', page: 'page2' })">/file1/page2</a>

Is more or less the same as (whether inline with ng-click or within a controller):

<a href ng-click="$state.go('edit', { file: 'file1', page: 'page2' })">/file1/page2</a>

The following two will force the controller and templateUrl to run, regardless if the current state is the same:

<a ui-sref="edit({ file: 'file1', page: 'page2' })" ui-sref-opts="{ reload: true }">/file1/page2</a>
<a href ng-click="$state.go('edit', { file: 'file1', page: 'page2' }, { reload: true })">/file1/page2</a>

You can read more about using a dynamic templateUrl here: https://github.com/angular-ui/ui-router/wiki#templates

Here is a working example: http://plnkr.co/edit/JUgUB3I675Kh7kKkitgJ?p=preview

Thanks. I hadn't come across the reload: true option - that was the solution. — cdjackson, Aug 11 '14 at 11:47

Angular UI update route with different parameters

1 Answers1