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).
我正在使用ui-router来表示我的AngularJS应用程序中的状态。在这个应用程序中,我希望在不更改URL的情况下更改状态(基本上是更新了“detail view”,但这不会影响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
.
我使用显示细节,但只有当我在我的$stateProvider中指定URL:“/detail-:id”时,才能显示细节。
It seems to me that the current state is only defined through the URL.
在我看来,当前状态仅仅是通过URL定义的。
3 个解决方案
#1
40
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.
在我的特定问题中,有一个复杂的因素,因为我需要将非url参数注入的状态是子状态。稍微复杂的事情。
The params: ['id']
part goes in the $stateProvider
declaration like this:
params: ['id']部分在$stateProvider声明中如下:
$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:
param名称与ui-sref属性连接如下:
<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.如果父状态也有一个URL参数,那么子状态也需要在其params数组中声明该参数。在上面的例子中,“parentParam”必须包含在儿童状态中。
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).
如果不这样做,那么在初始化应用程序时将抛出模块错误。至少在撰写本文时的最新版本中是如此(v.0.2.10)。
EDIT
编辑
@gulsahkandemir points out that
@gulsahkandemir指出,
Declaration of params in a state definition has changed to params: { id: {} } from params: ['id']
状态定义中的params声明已更改为params: {id:{}从params: ['id']
Judging by the changelog, this seems to be the case starting from v0.2.11
从变化量来看,这似乎是从v0.2.11开始的情况
Details of params can be found in the official docs
有关params的细节可以在官方文档中找到
#2
46
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']
状态定义中的params声明已更改为params: {id:{}从params: ['id']
So be aware :)
所以请注意:)
Source: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider
来源:http://angular-ui.github.io/ui-router/site/ / api / ui.router.state。stateProvider美元
#3
10
I now figured out, that you need to use the params: ['id']
property of the state in order to have the key not stripped when not using a URL.
我现在明白了,您需要使用状态的params: ['id']属性,以便在不使用URL时不删除键。
#1
40
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.
在我的特定问题中,有一个复杂的因素,因为我需要将非url参数注入的状态是子状态。稍微复杂的事情。
The params: ['id']
part goes in the $stateProvider
declaration like this:
params: ['id']部分在$stateProvider声明中如下:
$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:
param名称与ui-sref属性连接如下:
<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.如果父状态也有一个URL参数,那么子状态也需要在其params数组中声明该参数。在上面的例子中,“parentParam”必须包含在儿童状态中。
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).
如果不这样做,那么在初始化应用程序时将抛出模块错误。至少在撰写本文时的最新版本中是如此(v.0.2.10)。
EDIT
编辑
@gulsahkandemir points out that
@gulsahkandemir指出,
Declaration of params in a state definition has changed to params: { id: {} } from params: ['id']
状态定义中的params声明已更改为params: {id:{}从params: ['id']
Judging by the changelog, this seems to be the case starting from v0.2.11
从变化量来看,这似乎是从v0.2.11开始的情况
Details of params can be found in the official docs
有关params的细节可以在官方文档中找到
#2
46
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']
状态定义中的params声明已更改为params: {id:{}从params: ['id']
So be aware :)
所以请注意:)
Source: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider
来源:http://angular-ui.github.io/ui-router/site/ / api / ui.router.state。stateProvider美元
#3
10
I now figured out, that you need to use the params: ['id']
property of the state in order to have the key not stripped when not using a URL.
我现在明白了,您需要使用状态的params: ['id']属性,以便在不使用URL时不删除键。