1.0.0alpha0: $stateParams isn't updated when URL changes and reloadOnSearch:false

[drothlis]

Maybe #1962 needs to be applied to the 1.0 branch?

[nateabele]

Are you talking about the global $stateParams or a local resolve- or controller-injected copy?

[nateabele]

(Also, 1.0 uses a totally different model for handling dynamic parameters than 0.2.x).

[drothlis]

Are you talking about the global $stateParams or a local resolve- or controller-injected copy?

$stateParams (injected) in the controller.

I've put together a demo here: https://plnkr.co/edit/R04QVFMWEqKZhFBHMuWz?p=preview

• Change the "change me" text, which will trigger a $state.go(".", {x: new_value}, {location: 'replace', notify: false}). Note that the parameter x is updated in $location.url() but not in $stateParams.
• If you comment out reloadOnSearch: false then it does update $stateParams as I'd expect (but then the text input loses focus every time you type a character, which is the reason I want reloadOnSearch: false in the first place).

[drothlis]

It seems I was wrong about #1962 fixing this -- my example doesn't seem to work on 0.2.15 either. I had assumed that #1962 fixed this because of this statement in the commit message of 6ca0d77:

• Updates $state.params and $stateParams when skipping reload

[nateabele]

Yeah, it's a known issue. We're still working on a way to propagate changes to those objects. Thanks for flagging it.

[pavel-blagodov]

Also it has another side effect, let's consider the following

state("someState", {
  url: "/someState?someParams",
  reloadOnSearch: false,
  params: {
    someParams: {
      array: true
    }
  }
});

1. the page rendered at first time and href of links constructed, e.g. href="#/someState"
2. we click on another link that sets someParams, e.g. $state.go("someState", {someParams: ["a"]})
3. and then we click on the link that mentioned in step 1, e.g. href="#/someState"

as result we lost someParams

or vice versa

1. the page rendered at first time and href of links constructed, e.g. href="#/someState?someParams=a&someParams=b"
2. we click on another link that removes someParams, e.g. $state.go("someState", {someParams: [ ] })
3. and then we click on the link that mentioned in step 1, e.g. href="#/someState?someParams=a&someParams=b"

as result someParams is here again

Is this the same issue or this issue requires separate ticket?

[mackelito]

is this confirmed as fixed?
Updating the plunkr with beta3 still shows the issue

[christopherthielen]

@mackelito yes https://plnkr.co/edit/XiyY4VoBdJ0MzGQ3cCP6?p=preview

$stateParams is confusing and is deprecated in 1.0. When injected into a controller, it never changes. However, the global service $stateParams is updated properly.

This confusing behavior (of a different object being injected into a controller then a global service) is why it is now deprecated. Instead we recommend using $transition$.params() because it is unambiguous.

[mackelito]

@christopherthielen I see.. I there any docs on how to use $transition$.params()?
the https://ui-router.github.io/tutorial/ng1/hellogalaxy example still have Transitions as "TODO"

[christopherthielen]

There isn't a guide or tutorial specifically about $transition$.params(). I have a guide for Transitions in progress, about 30% complete.

A transition is the process of activating a ui-router state using the desired parameters.

The short version of how to use $transition$.params() is to inject the current Transition object (that's the $transition$) and get its parameter values ($transition$.params()).

[mackelito]

hmm.. so I should us it in my component like this?

class PageController {
    constructor($transition$) {
        'ngInject';

        console.log($transition$);
    }
}

export default PageController;

or should I use it in resolve: on the state?

[christopherthielen]

When using route-to-component

.state('foo', {
  component: 'fooComponent'
})

.component('fooComponent', {
  template: `<h1>{{ $ctrl.params }}</h1>`,
  controller: function() { this.params = this.$transition$.params(); }
  bindings: {  $transition$: '<' }
})

Route-to-component (as resolve)

.state('foo', {
  component: 'fooComponent',
  resolve: { params: ($transition$) => $transition$.params() }
})

.component('fooComponent', {
  template: `<h1>{{ $ctrl.params }}</h1>`,
  bindings: {  params: '<' }
})

old school template+controller

.state('foo', {
  template: `<h1>{{ $ctrl.params }}</h1>`,
  controller: function($transition$) { 
    this.params = $transition$.params(); 
  },
  controllerAs: '$ctrl',

})