How to change url by changing $stateParams without reloading page

Question

I have a route with parameter defined:

$stateProvider
.state('item', {..})
.state('item.view', {
  url: 'item/:id'
  template: '...',
  controller: '...'
});

While already in item.view state, I would like to switch the url with

$state.go('item.view', {id: 'someId'})

without reloading the page. I have tried:

$state.go('item.view', {id: 'someId'}, {notify: false});
$state.go('item.view', {id: 'someId'}, {notify: false, reload: false});

Both still cause the page to reload. I think i may be running into the issue described here: https://github.com/angular-ui/ui-router/issues/1758

take a look at this SO post: link it appears you can use $state.transitionTo (instead of $state.go) and set optional parameters to avoid the reload. One of the comments (with the highest number of votes) in that link suggests the following: $state.transitionTo('.detail', {id: newId}, { location: true, inherit: true, relative: $state.$current, notify: false }) so basically set notify to false and location to true – Arjen de Vries Oct 6 '14 at 15:13 credit to the author of that comment. — Shehryar Abbasi
– Shehryar Abbasi, Commented May 17, 2015 at 4:52

Community · Accepted Answer · 2017-05-23 12:17:48Z

4

That should be easy enough:

// It needs to be executed on main scope, hence $timeout
// If you are calling from a controller this is a must
// Otherwise it will 'lag' and update on next function call
$timeout(function() {
    // As Sheryar Abbasi commented, the rest is simple.
    // You should call $state.transitionTo with notify: false
    // to stop the reload.
    $state.transitionTo(
        'item.view', 
        { 
            id: 4378 // New id/$stateParams go here 
        }, 
        { 
            location: true, // This makes it update URL
            inherit: true, 
            relative: $state.$current, 
            notify: false // This makes it not reload
        }
    ); 
});

This StackOverflow thread helped me figure out the $timeout.

Here is the official ui-router quick reference.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Oct 14, 2016 at 11:55

Djuka

5046 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

How to change url by changing $stateParams without reloading page

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related