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

Je dois passer et recevoir deux paramètres à l'état vers lequel je veux transiter en utilisant ui-sref de ui-router.

Quelque chose comme l'utilisation du lien ci-dessous pour faire passer 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>

Recevoir les 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
  //..
});

J'obtiens undefined pour $stateParam dans le contrôleur.

Quelqu'un pourrait-il m'aider à comprendre comment 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'
    }
  }

});
Radim Köhler
Question modifiée 20 mai 2015 в 5:07
Programmation
javascript html angularjs angular-ui angular-ui-router
3 septembre 2014 в 2:50
20 vues
Solution

J'ai créé un [exemple][1] pour montrer comment faire. La définition de state mise à jour serait :

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

        },
        ...
      }

Et ceci 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'url de l'état d'origine est maintenant définie comme suit :

url: '/:foo?bar',

ce qui signifie que les paramètres de l'url sont attendus sous forme de

/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'})">

De plus, le contrôleur utilise $stateParams au lieu de $stateParam.

Lien vers la documentation :

  • [URL Paramètres] [2]

Vous pouvez le consulter [ici] [3].

params : {}

Il existe également un nouveau paramètre, plus granulaire, params : {}. Comme nous l&#8217avons 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 sont décrits dans la documentation du [$stateProvider][4].

En voici un extrait

  • value - {objet|fonction=} : spécifie la valeur par défaut pour ce paramètre. Ceci définit implicitement ce paramètre comme optionnel...
  • array - {boolan=}: (default : false) Si true, la valeur du paramètre 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 actuelle du paramètre est la même que la valeur par défaut.

On peut appeler ces paramètres de cette façon :

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

Regardez-le en action [ici][5].

[1] : http://plnkr.co/edit/r2JhV4PcYpKJdBCwHIWS?p=preview [2] : https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters [3] : http://plnkr.co/edit/r2JhV4PcYpKJdBCwHIWS?p=preview [4] : http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider [5] : http://plnkr.co/edit/r2JhV4PcYpKJdBCwHIWS?p=preview

Radim Köhler
Réponse modifiée 11 mai 2015 в 6:56
Commentaires (5)

Les paramètres ne doivent pas nécessairement figurer dans 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'état home, vous perdrez les paramètres de l'état, car ils ne sont stockés nulle part.

Une description complète de ce comportement est documentée [ici] (http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider), sous la ligne params dans la section state(name, stateConfig).

Commentaires (1)

Vous avez simplement mal orthographié $stateParam, cela devrait être $stateParams (avec un s). C'est pourquoi vous obtenez undefined ;)

Commentaires (1)