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

, j'ai créé un exemple, pour montrer comment. Mise à jour state définition 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 le State home a maintenant une url définie comme:

url: '/:foo?bar',

Ce Qui signifie que les paramètres dans l'url sont attendus

/fooVal?bar=barValue

Ces deux liens passeront correctement les arguments dans le contrôleur:

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

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

Lien vers doc:

• paramètres URL

Vous pouvez le vérifier ici

params : {}

Il est également nouveaux, plus granulaire de réglage params : {}. Comme nous l'avons déjà vu, nous pouvons déclarer des paramètres dans le cadre de url. Mais avec 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 du $stateProvider

Ci-dessous est juste un extrait

• valeur {objet|fonction=}: spécifie la valeur par défaut pour 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 valeur de paramètre actuelle est la même que 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érifier dans l'action ici