Comment passer des paramètres en utilisant ui-sref dans ui-router au contrôleur


369

J'ai besoin de passer et de recevoir deux paramètres à l'état vers lequel je veux passer en utilisant ui-srefui-router.

Quelque chose comme utiliser le lien ci-dessous pour la transition de l'état vers les paramètres homewith fooet bar:

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

Réception fooet barvaleurs dans un contrôleur:

app.controller('SomeController', function($scope, $stateParam) {
  //..
  var foo = $stateParam.foo; //getting fooVal
  var bar = $stateParam.bar; //getting barVal
  //..
});     

Je reçois undefinedpour $stateParamle contrôleur.

Quelqu'un pourrait-il m'aider à comprendre comment le faire?

Éditer:

.state('home', {
  url: '/',
  views: {
    '': {
      templateUrl: 'home.html',
      controller: 'MainRootCtrl'

    },

    'A@home': {
      templateUrl: 'a.html',
      controller: 'MainCtrl'
    },

    'B@home': {
      templateUrl: 'b.html',
      controller: 'SomeController'
    }
  }

});

5
Vous devez également les configurer dans vos itinéraires. ex: - url:'.../home/:foo/:bar
PSL

@PSL: Pourriez-vous simplement donner un petit exemple ici? Merci.
sauter le

@PSL: Merci PSL, existe-t-il un autre moyen de pouvoir avoir ces paramètres avec leurs valeurs dans un contrôleur?
sauter le

1
Faites '/:foo/:bar': {votre itinéraire vierge ou vous pouvez également configurer une chaîne de requête.
PSL

Réponses:


531

J'ai créé un exemple pour montrer comment. La statedéfinition mise à jour serait:

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

        },
        ...
      }

Et ce serait le contrôleur:

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

Ce que nous pouvons voir, c'est que la maison d'État a maintenant une URL définie comme:

url: '/:foo?bar',

ce qui signifie que les paramètres dans l'url sont attendus comme

/fooVal?bar=barValue

Ces deux liens transmettront correctement les arguments au contrôleur:

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

En outre, le contrôleur consomme $stateParamsau lieu de $stateParam.

Lien vers le doc:

Vous pouvez le vérifier ici

params : {}

Il existe également un nouveau cadre plus granulaire params : {}. Comme nous l'avons déjà vu, nous pouvons déclarer des paramètres comme faisant partie de url. Mais avec la params : {}configuration - nous pouvons étendre cette définition ou même introduire des paramètres qui ne font pas partie de l'url:

.state('other', {
    url: '/other/:foo?bar',
    params: { 
        // here we define default value for foo
        // we also set squash to false, to force injecting
        // even the default value into url
        foo: {
          value: 'defaultValue',
          squash: false,
        },
        // this parameter is now array
        // we can pass more items, and expect them as []
        bar : { 
          array : true,
        },
        // this param is not part of url
        // it could be passed with $state.go or ui-sref 
        hiddenParam: 'YES',
      },
    ...

Les paramètres disponibles pour les paramètres sont décrits dans la documentation de $ stateProvider

Ci-dessous est juste un extrait

  • value - {object | function =} : spécifie la valeur par défaut de ce paramètre. Cela définit implicitement ce paramètre comme facultatif ...
  • array - {boolean =}: (par défaut: false) Si true, la valeur param sera traitée comme un tableau de valeurs.
  • squash - {bool | string =}: squash configure la façon dont une valeur de paramètre par défaut est représentée dans l'URL lorsque la valeur de paramètre actuelle est identique à la valeur par défaut.

Nous pouvons appeler ces paramètres de cette façon:

// hidden param cannot be passed via url
<a href="#/other/fooVal?bar=1&amp;bar=2">
// default foo is skipped
<a ui-sref="other({bar: [4,5]})">

Vérifiez-le en action ici


1
Excellente réponse, mais que faire si je veux faire quelque chose comme ça - <a ui-sref="profile.dashboard({aintUserId: [{{ibusUser.icdoUser.idoUser.userId}}}} }"> cela ne fonctionne pas. Comment puis-je le faire fonctionner?
Fahad Mullaji

@Radim, pouvez-vous jeter un œil à stackoverflow.com/questions/41429784/… et m'aider un peu
user203687

1
C'était vraiment utile! Merci d'avoir posté ceci.
Shoukat Mirza

1
Excellente réponse, c'est vraiment utile. Merci !
Venkat

Vous pouvez également avoir une URL comme celle-ci:url: "/:id?foo&bar"
Soupe au poulet

107

Vous n'avez pas nécessairement besoin d'avoir les paramètres à l'intérieur de l'URL.

Par exemple, avec:

$stateProvider
.state('home', {
  url: '/',
  views: {
    '': {
      templateUrl: 'home.html',
      controller: 'MainRootCtrl'

    },
  },
  params: {
    foo: null,
    bar: null
  }
})

Vous pourrez envoyer des paramètres à l'état, en utilisant soit:

$state.go('home', {foo: true, bar: 1});
// or
<a ui-sref="home({foo: true, bar: 1})">Go!</a>

Bien sûr, si vous rechargez la page une fois sur l' homeétat, vous perdrez les paramètres d'état, car ils ne sont stockés nulle part.

Une description complète de ce comportement est documentée ici , sous la paramsligne de la state(name, stateConfig)section.


L'attribut params a très bien fonctionné pour moi !!!!!! MERCI!! VOUS ÊTES UN EXPERT GOOGLE
Lucas

30

Vous avez simplement mal orthographié $stateParam, cela devrait être $stateParams(avec un s). Voilà pourquoi vous obtenez indéfini;)


9
En règle générale, cela devrait faire l'objet d'un commentaire dans la question. Mais quoi qu'il en soit +1 pour les efforts déployés pour lire la question et comprendre le problème :)
Anmol Saraf
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.