Comment puis-je transmettre des paramètres aux contrôleurs à l'aide de ui-sref dans ui-router ?

Passer des paramètres aux contrôleurs à l'aide de ui-sref dans ui-router

Dans ui-router, utiliser ui-sref pour passer à un état permet de transmettre des paramètres au contrôleur. Pour clarifier, vous pouvez envoyer et recevoir deux paramètres, "foo" et "bar", vers un état cible.

Définition de l'état

Mettre à jour la définition de l'état pour accepter paramètres dans l'URL :

  $stateProvider
    .state('home', {
      url: '/:foo?bar',
      views: {
        '': {
          templateUrl: 'tpl.home.html',
          controller: 'MainRootCtrl'
        }
      }
    });

Consommation du contrôleur

Dans le contrôleur, récupérez les paramètres de $stateParams :

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

Génération de liens

Pour transmettre les paramètres, utilisez cette syntaxe :

<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">

Cela passera à l'état « accueil » avec les paramètres foo et bar spécifiés, qui peuvent ensuite accessible dans le contrôleur via $stateParams.

Personnalisation des paramètres (facultatif)

Avec la propriété "params" dans la définition de l'état, vous pouvez configurer davantage le comportement des paramètres :

  $stateProvider
    .state('other', {
      url: '/other/:foo?bar',
      params: {
        foo: {
          value: 'defaultValue',
          squash: false,
        },
        bar: {
          array: true,
        },
        hiddenParam: 'YES',
        // (not in URL)
      }
    });

Les paramètres des paramètres incluent :

• valeur : valeur par défaut
• tableau : traiter la valeur du paramètre comme un tableau
• squash : contrôle par défaut représentation de la valeur dans l'URL

Injection de paramètres

L'injection des paramètres du contrôleur se fait via $stateParams. Vous pouvez récupérer des valeurs avec :

var paramValue = $stateParams.paramName;

C'est ainsi que UI-router permet le passage de paramètres entre les états à l'aide de ui-sref pour des transitions d'état faciles et l'accessibilité des paramètres dans le contrôleur.

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!