Angular UI Router: How to go to the same state with different $stateParam?

Question

I am wondering how can I go to the same state, with different $stateParam?

I was trying to go with:

$state.go('^.currentState({param: 0})')

However, it was not working.

Answer 1

the params are second paramater of the go() method

$state.go('^.currentState', {param: 0})

go(to, params, options)

Convenience method for transitioning to a new state. $state.go calls $state.transitionTo internally but automatically sets options to { location: true, inherit: true, relative: $state.$current, notify: true }. This allows you to easily use an absolute or relative to path and specify only the parameters you'd like to update (while letting unspecified parameters inherit from the currently active ancestor states).

Answer 2

You might want to use this piece of code:

<a ui-sref=".({param: 0})"></a>

No need to use controller.

Answer 3

In my case, I wanted to reload the same state, but with different parameters. (null in this specific occurrence)

The situation is as follows: We have a website with different companies, each with their own branding page. You can visit other companies' pages and there's a menu entry to quickly visit your own.

A company's page is located under /company/somecompanyid, whereas your own page will be loaded when visiting /company. Without the addition of an id. Or company_id: null in code.

The problem
When you're viewing a random company's page, let's say company/123456 and you click the designated menu entry to visit your own page, nothing would happen!
Ui-router believes you're on the same route and simply keeps you there.

The solution
Add the following to your template:
<a ui-sref="company" ui-sref-opts="{reload: true, inherit: false}" ... ></a>

What does it do?
reload: true This will force your state to reload. But it'll copy your current route parameters. Which means your still seeing the other company's page.

inherit: false Setting the inherit property to false will force ui-router to use the params you provided. In my case, the companyId was null and user's personal page was loaded. Hurray!

You can find all ui-sref-options on the documentation pages. ui-sref-options

Answer 4

If you'd like to reload your state, you can also use ui-sref-opts. Passing in the reload: true option, will reload the current state.

<a ui-sref-opts="{reload:true}" ui-sref="app.post.applicants">Applicants</a>

Answer 5

The simplest solution is ->

You can make 2 state with same controller and same html page and redirect one by one

PROS: No need to handle back history and all works with the great flow

  .state('app.productDetails', {
         url: '/productDetails',
         cache: false,
         views: {
             'menuContent': {
                 templateUrl: 'src/products/productDetails/productDetails.html',
                 controller: 'ProductDetailsCtrl'
             }
         },
         params: {
             productID: 0,
             modelID: 0
         }
     })

    .state('app.modelDetails', {
        url: '/modelDetails',
        cache: false,
        views: {
            'menuContent': {
                templateUrl: 'src/products/productDetails/productDetails.html',
                controller: 'ProductDetailsCtrl'
            }
        },
        params: {
            productID: 0,
            modelID: 0
        }
    })

Answer 6

$state.go('.', {param: someId});