Comment transmettre des paramètres à un contrôleur à l'aide de ui-sref dans UI-Router ?

Transmission de paramètres au contrôleur à l'aide de ui-sref dans UI-Router

Dans UI-Router, transmission de paramètres à un contrôleur via ui-sref est un élément crucial pour le partage de données entre États. Voici comment accomplir cette tâche efficacement :

Pour commencer, définissez l'URL de l'état cible pour inclure des espaces réservés de paramètres à l'aide de la syntaxe deux-points, comme le montre la définition d'état mise à jour ci-dessous :

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

Dans cet exemple, l'état « home » attend les paramètres « foo » et « bar » dans le chemin de l'URL.

Ensuite, ajustez le contrôleur pour recevoir ces paramètres correctement :

.controller('MainRootCtrl', function($scope, $state, $stateParams) {
  // ...
  var foo = $stateParams.foo; // Accessing 'fooVal'
  var bar = $stateParams.bar; // Accessing 'barVal'
  // ...

Dans ce contrôleur, nous injectons $stateParams au lieu de $stateParam, ce qui nous donne accès aux paramètres transmis.

De plus, UI-Router fournit également une configuration fine des paramètres via l'objet 'params' au sein de l'état. définition. Cette option vous permet de spécifier des valeurs par défaut, d'imposer des contraintes de type, etc.

Par exemple, considérez cette configuration de paramètres étendus :

.state('other', {
  url: '/other/:foo?bar',
  params: {
    foo: {
      value: 'defaultValue',
      squash: false,
    },
    bar: {
      array: true, // Treat bar as an array
    },
    hiddenParam: 'YES', // Not present in the URL
  },
  ...

Cette configuration montre comment nous pouvons définir des valeurs par défaut pour paramètres et contrôlez leur comportement dans l'URL.

Enfin, n'oubliez pas de transmettre les paramètres lors de la navigation vers l'état souhaité en utilisant soit l'attribut 'ui-sref', soit la méthode '$state.go()' :

<a ui-sref="other({foo: 'fooVal1', bar: 'barVal1'})">...</a>
$state.go('home', {foo: 'fooVal2', bar: 'barVal2'});

En implémentant cette approche, vous pouvez transmettre efficacement des paramètres aux contrôleurs à l'aide de ui-sref dans UI-Router, garantissant ainsi des transitions d'état transparentes et un partage de données au sein de vos applications AngularJS.

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!