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

Dans mon cas, j'ai essayé toutes les options données ici, mais aucune ne fonctionnait correctement (angular 1.3.13, ionic 1.0.0, angular-ui-router 0.2.13). La solution était :

.state('tab.friends', {
      url: '/friends/:param1/:param2',
      views: {
        'tab-friends': {
          templateUrl: 'templates/tab-friends.html',
          controller: 'FriendsCtrl'
        }
      }
    })

et dans le state.go :

$state.go('tab.friends', {param1 : val1, param2 : val2});

Santé!

Answer 2

J'ai passé beaucoup de temps à lutter avec $state & $stateParams d'Ionic / Angular;

Pour utiliser $state.go() et $stateParams, vous devez avoir certaines choses configurées et d'autres paramètres ne doivent pas être présents.

Dans mon app.config(), j'ai inclus $stateProvider et défini à l'intérieur plusieurs états:

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

La clé params est particulièrement importante. De plus, remarquez qu'il n'y a PAS de clés url présentes... l'utilisation de stateParams et des URL NE se mélangent PAS. Ils sont mutuellement exclusifs l'un de l'autre.

Dans l'appel $state.go(), définissez-le comme ceci:

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

Les variables $stateParams index et anotherKey seront SEULEMENT remplies si elles sont d'abord répertoriées dans la clé de définition params de $stateController.

Dans le contrôleur, incluez $stateParams comme illustré:

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

Les variables passées devraient être disponibles!

Answer 3

Essayer avec reload: true?

Je ne pouvais pas comprendre ce qui se passait pendant très longtemps - il s'est avéré que je me trompais. Si vous êtes certain que les choses sont écrites correctement et que vous souhaitez utiliser le même état, essayez reload: true:

.state('status.item', {
    url: '/:id',
    views: {...}
}

$state.go('status.item', { id: $scope.id }, { reload: true });

J'espère que cela vous fera gagner du temps!

Answer 4

J'avais rencontré un problème similaire. J'ai fini par trouver une solution fonctionnelle après beaucoup de recherches et d'essais. Voici ma solution qui devrait fonctionner pour vous.

J'ai deux contrôleurs - searchBoxController et stateResultController et un paramètre nommé searchQuery à transmettre depuis une vue contenant une boîte de recherche vers une vue affichant les résultats récupérés depuis un serveur distant. Voici comment faire :

Voici le contrôleur à partir duquel vous appelez la vue suivante en utilisant $state.go()

.controller('searchBoxController', function ($scope, $state) {
        $scope.doSearch = function(){
            var searchInputRaw = $scope.searchQueryInput;
            $state.go('app.searchResults', { searchQuery: searchInput });
        }
    })

Voici l'état qui sera appelé lorsque le $state.go() sera exécuté :

.state('app.searchResults', 
            {
                url: '/searchResults',
                views:
                {
                    'menuContent': { templateUrl: 'templates/searchResult.html', controller: 'stateResultController' }
                },
                params: 
                {
                    'searchQuery': ''
                }
            })

Et enfin, le contrôleur associé à l'état app.searchResults :

.controller('stateResultController', function ($scope, $state, $stateParams, $http) {
        $scope.searchQueryInput = $stateParams.searchQuery;
    });

Answer 5

Et dans mon cas d'un état parent/enfant, tous les paramètres déclarés dans l'état enfant doivent être connus par l'état parent

        .state('full', {
            url: '/full',
            templateUrl: 'js/content/templates/FullReadView.html',
            params: { opmlFeed:null, source:null },
            controller: 'FullReadCtrl'
        })
        .state('full.readFeed', {
            url: '/readFeed',
            views: {
                'full': {
                    templateUrl: 'js/content/templates/ReadFeedView.html',
                    params: { opmlFeed:null, source:null },
                    controller: 'ReadFeedCtrl'
                }
            }
        })