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

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'
    }
  }

});

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:

• Paramètres d'URL

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

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.

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