web-dev-qa-db-fra.com

Paramètres pour les états sans URL dans ui-router pour AngularJS

J'utilise ui-router pour représenter les états dans mon application AngularJS. Dans ce document, je voudrais changer l'état sans changer l'URL (fondamentalement, une "vue détaillée" est mise à jour mais cela ne devrait pas affecter l'URL).

J'utilise <a ui-sref="item.detail({id: item.id})"> pour afficher les détails mais cela ne fonctionne que si je spécifie une URL comme url: "/detail-:id" dans mon $stateProvider.

Il me semble que l'état actuel n'est défini que par l'URL.

angularjsangular-ui-router
39
akirk

Merci pour votre réponse, cela m'a aidé dans la bonne direction mais j'aimerais juste ajouter une description plus complète.

Dans mon problème spécifique, il y avait un facteur de complication car l'état dans lequel j'avais besoin d'injecter un paramètre non URL était un état enfant. Cela compliquait légèrement les choses.

Le params: ['id'] partie va dans le $stateProvider déclaration comme ceci:

$stateProvider.state('parent', {
    url: '/:parentParam',
    templateUrl: '...',
    controller: '...'
}).
state('parent.child', {
    params: ['parentParam','childParam'],
    templateUrl: '...',
    controller: '...'
});

Et le nom du paramètre est connecté au ui-sref attribut comme ceci:

<a ui-sref=".child({ childParam: 'foo' })">

Et le hic est le suivant:

Si l'état parent a également un paramètre URL, l'enfant a besoin de déclarer également cela dans son tableau params. Dans l'exemple ci-dessus, "parentParam" doit être inclus dans l'état enfant.

Si vous ne le faites pas, une erreur de module sera générée lors de l'initialisation de l'application. C'est au moins vrai sur la dernière version au moment de la rédaction (v.0.2.10).

[~ # ~] modifier [~ # ~]

@gulsahkandemir souligne que

La déclaration des paramètres dans une définition d'état a été remplacée par params: {id: {}} par params: ['id']

A en juger par le changelog, cela semble être le cas à partir de la v0.2.11

Détails des paramètres peuvent être trouvés dans les documents officiels

41
ivarni

Juste une information supplémentaire pour les nouveaux arrivants à ce poste:

La déclaration des paramètres dans une définition d'état est devenue params: { id: {} } de params: ['id']

Alors soyez conscient :)

Source: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider

46
gulsahkandemir

J'ai maintenant compris que vous devez utiliser le params: ['id'] propriété de l'état afin que la clé ne soit pas supprimée lorsque vous n'utilisez pas d'URL.

10
akirk