Parameters for states without URLs in ui
I am using ui-router to represent states in my AngularJS app. In it I'd like to change the state without changing the URL (basically a "detail view" is updated but this should not affect the URL).
I use <a ui-sref="item.detail({id: item.id})">
to display the detail but this only works if I specify a URL like url: "/detail-:id"
in my $stateProvider
.
It seems to me that the current state is only defined through the URL.
Thanks for your answer, it did help me in the right direction but I'd just like to add a more complete description.
In my specific issue there was a complicating factor because the state I needed to inject a non-URL parameter to was a child state. That complicated things slightly.
The params: ['id']
part goes in the $stateProvider
declaration like this:
$stateProvider.state('parent', {
url: '/:parentParam',
templateUrl: '...',
controller: '...'
}).
state('parent.child', {
params: ['parentParam','childParam'],
templateUrl: '...',
controller: '...'
});
And the param name is connected to the ui-sref
attribute like this:
<a ui-sref=".child({ childParam: 'foo' })">
And the catch is this:
If the parent state also has a URL parameter then the child needs to also declare that in its params
array. In the example above "parentParam" must be included in the childstate.
If you don't do that then a module-error will be thrown when the application is initialized. This is at least true on the latest version at the time of writing (v.0.2.10).
EDIT
@gulsahkandemir points out that
Declaration of params in a state definition has changed to params: { id: {} } from params: ['id']
Judging by the changelog, this seems to be the case starting from v0.2.11
Details of params can be found in the official docs
Just an additional information for new comers to this post:
Declaration of params in a state definition has changed to params: { id: {} }
from params: ['id']
So be aware :)
Source: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider
我现在想通了,你需要使用params: ['id']
属性来让密钥在不使用URL时不被剥离。
上一篇: AngularJS ui路由器在没有URL的状态之间传递数据
下一篇: ui中没有URL的状态参数