如何通过在不重新加载页面的情况下更改$ stateParams来更改URL

时间:2022-08-26 11:32:44

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

虽然已经处于item.view状态,但我想切换网址

$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

两者仍然导致页面重新加载。我想我可能会遇到这里描述的问题:https://github.com/angular-ui/ui-router/issues/1758

1 个解决方案

#1


2  

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 * thread helped me figure out the $timeout.

这个*线程帮助我弄清了$ timeout。

Here is the official ui-router quick reference.

这是官方的ui-router快速参考。

#1


2  

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 * thread helped me figure out the $timeout.

这个*线程帮助我弄清了$ timeout。

Here is the official ui-router quick reference.

这是官方的ui-router快速参考。