Comment transmettre des paramètres aux États dans UI-Router avec ui-sref ?

Comprendre le passage des paramètres dans UI-Router avec ui-sref

Dans UI-Router, passer des paramètres à un état lors de la transition via ui-sref nécessite une configuration spécifique. Examinons les étapes :

1. Définir les paramètres d'URL :

Définissez les paramètres d'URL attendus dans la propriété url de l'état. La syntaxe est :paramName? où paramName est le paramètre que vous souhaitez recevoir. Par exemple :

.state('home', {
  url: '/:foo?bar',

2. Attribuez des valeurs de paramètre à ui-sref :

Transmettez les valeurs de paramètre à ui-sref en tant qu'objet entre accolades. La syntaxe est ui-sref="stateName({paramName: 'value', ...})". Exemple :

<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home with foo and bar parameters</a>

3. Utilisez $stateParams dans le contrôleur :

Dans le contrôleur de l'état de destination, injectez $stateParams, qui contient les paramètres transmis. Récupérez les valeurs à l’aide de $stateParams.paramName. Exemple :

app.controller('SomeController', function($scope, $stateParams) {
  var foo = $stateParams.foo;
  var bar = $stateParams.bar;
})

4. Transmission de paramètres non URL :

En plus des paramètres dans l'URL, vous pouvez définir des paramètres supplémentaires dans la configuration des paramètres de l'état. Cela vous permet de transmettre des paramètres qui ne font pas partie de l'URL. Exemple :

.state('home', {
  url: '/:foo?bar',
  params: {
    foo: { value: 'defaultValue', squash: false, },
    hiddenParam: 'YES'
  }

Les paramètres définis dans params peuvent être transmis à l'aide de $state.go() ou ui-sref. Ils ne seront pas inclus dans l'URL.

5. Paramètres du tableau :

Vous pouvez également déclarer des paramètres sous forme de tableaux en définissant array: true dans la configuration des paramètres. Exemple :

params: {
  bar: { array: true, }
}

N'oubliez pas d'utiliser des accolades lorsque vous transmettez des valeurs de tableau :

<a ui-sref="home({foo: 'fooVal1', bar: ['barVal1', 'barVal2']})">...</a>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!