web-dev-qa-db-fra.com

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

J'ai besoin de transmettre et de recevoir deux paramètres à l'état dans lequel je souhaite passer à l'aide de ui-sref de ui-router.

Utilisez le lien ci-dessous pour passer de l'état à home avec les paramètres foo et bar:

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

Réception des valeurs foo et bar 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 undefined pour $stateParam dans le contrôleur.

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

Edit:

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

    },

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

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

});
javascripthtmlangularjsangular-ui-routerangular-ui
360
skip

J'ai créé un exemple pour montrer comment faire. La définition state 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 l'état de la maison a maintenant une URL définie comme suit:

_url: '/:foo?bar',
_

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

_/fooVal?bar=barValue
_

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

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

De plus, le contrôleur consomme _$stateParams_ au lieu de _$stateParam_.

Lien vers doc:

Vous pouvez le vérifier ici

_params : {}_

Il existe également un nouveau paramètre plus granulaire params : {}. Comme nous l'avons déjà vu, nous pouvons déclarer des paramètres dans le cadre de url. Mais avec la configuration _params : {}_ - 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

  • valeur - {objet | fonction =}: spécifie la valeur par défaut pour ce paramètre. Ceci définit implicitement ce paramètre comme facultatif ...
  • array - {boolean =}: (défaut: false) Si la valeur est true, la valeur param sera traitée comme un tableau de valeurs.
  • squash - {bool | string =}: squash configure la manière 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

527
Radim Köhler

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:

$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'état home, 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 ligne params de la section state(name, stateConfig).

107
Paul Mougel

Vous avez simplement mal orthographié $stateParam, il devrait s'agir de $stateParams (avec un s). C'est pourquoi tu deviens indéfini;)

28
felixfbecker