在ui-router中没有针对AngularJS的url的状态参数

时间:2022-08-24 13:04:10

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时不删除键。