Comment envoyer et récupérer des paramètres en utilisant $state.go toParams et $stateParams ?

Question

Je suis en train d'utiliser AngularJS v1.2.0-rc.2 avec ui-router v0.2.0. Je veux passer l'état référent à un autre état, donc j'utilise toParams de $state.go comme ceci :

$state.go('toState', {referer: $state.current.name});

Selon la documentation, cela devrait remplir les $stateParams du contrôleur toState, mais elle est undefined. Qu'est-ce que je rate?

J'ai créé un plunk pour le démontrer :

http://plnkr.co/edit/ywEcG1

Answer 1

Si vous souhaitez passer un état non-URL, alors vous ne devez pas utiliser url lors de la configuration de votre state. J'ai trouvé la réponse sur un PR et j'ai fait quelques essais pour mieux comprendre.

$stateProvider.state('toState', {
  templateUrl:'wokka.html',
  controller:'stateController',
  params: {
    'referer': 'quelque chose par défaut', 
    'param2': 'quelque chose par défaut', 
    'etc': 'quelque chose par défaut'
  }
});

Ensuite, vous pouvez y accéder de la manière suivante :

$state.go('toState', { 'referer':'jimbob', 'param2':37, 'etc':'bluebell' });

Ou :

var result = { referer:'jimbob', param2:37, etc:'bluebell' };
$state.go('toState', result);

Et en HTML comme ceci :

{{ thingy.referer }}

Ce cas d'utilisation n'est pas du tout couvert dans la documentation, mais je pense que c'est un moyen puissant de changer d'état sans utiliser d'URL.

Answer 2

La solution de Nathan Matthews ne fonctionnait pas pour moi mais elle est totalement correcte mais il est inutile de chercher un contournement :

Le point clé est : Le type des paramètres définis et toParams de $state.go doit être le même tableau ou objet des deux côtés de la transition d'état.

Par exemple, lorsque vous définissez des params dans un état comme suit, vous signifiez que les params sont un tableau en utilisant "[]":

$stateProvider
.state('home', {
    templateUrl: 'home',
    controller:  'homeController'
})
.state('view', {
    templateUrl: 'overview',
    params:      ['index', 'anotherKey'],
    controller:  'overviewController'
})

Donc vous devez également passer toParams comme un tableau comme ceci :

params = { 'index': 123, 'anotherKey': 'Ceci est un test' }
paramsArr = (val for key, val of params)
$state.go('view', paramsArr)

Et vous pouvez y accéder via $stateParams comme un tableau comme ceci :

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams[0];
    var anotherKey = $stateParams[1];
});

Une meilleure solution est d'utiliser un objet au lieu d'un tableau des deux côtés :

$stateProvider
.state('home', {
    templateUrl: 'home',
    controller:  'homeController'
})
.state('view', {
    templateUrl: 'overview',
    params:      {'index': null, 'anotherKey': null},
    controller:  'overviewController'
})

J'ai remplacé [] par {} dans la définition des params. Pour passer toParams à $state.go, vous devez également utiliser un objet au lieu d'un tableau :

$state.go('view', { 'index': 123, 'anotherKey': 'Ceci est un test' })

ensuite vous pouvez y accéder via $stateParams facilement :

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams.index;
    var anotherKey = $stateParams.anotherKey;
});

Answer 3

Tout ce que j'avais à faire était d'ajouter un paramètre à la définition de l'état de l'url comme ceci

url: '/toState?referer'

Erf!

Answer 4

Je ne suis pas sûr que cela fonctionnera avec AngularJS v1.2.0-rc.2 et ui-router v0.2.0. J'ai testé cette solution sur AngularJS v1.3.14 avec ui-router v0.2.13.

Je viens de réaliser qu'il n'est pas nécessaire de passer le paramètre dans l'URL comme le recommande gwhn.

Il suffit d'ajouter vos paramètres avec une valeur par défaut dans la définition de votre état. Votre état peut toujours avoir une valeur d'URL.

$stateProvider.state('state1', {
    url : '/url',
    templateUrl : "new.html",
    controller : 'TestController',
    params: {new_param: null}
});

et ajoutez le paramètre à $state.go()

$state.go('state1',{new_param: "Going places!"});

Answer 5

Aucun de ces exemples sur cette page n'a fonctionné pour moi. Voici ce que j'ai utilisé et ça a bien fonctionné. Certaines solutions disaient que vous ne pouvez pas combiner l'URL avec $state.go() mais ce n'est pas vrai. La chose maladroite est que vous devez définir les paramètres pour l'URL et également lister les paramètres. Les deux doivent être présents. Testé sur Angular 1.4.8 et UI Router 0.2.15.

Dans l'état, ajoutez vos paramètres à la fin de l'état et définissez les paramètres :

url: 'view?index&anotherKey',
params: {'index': null, 'anotherKey': null}

Dans votre contrôleur, votre instruction go ressemblera à ceci :

$state.go('view', { 'index': 123, 'anotherKey': 'Ceci est un test' });

Ensuite, pour extraire les paramètres et les utiliser dans votre nouveau contrôleur d'état (n'oubliez pas de passer $stateParams à la fonction de votre contrôleur) :

var index = $stateParams.index;
var anotherKey = $stateParams.anotherKey;
console.log(anotherKey); //ça fonctionne !