Comment passer un objet dans un état en utilisant UI-router?


119

J'aimerais pouvoir passer à un état et passer un objet arbitraire en utilisant ui-router.

Je sais que cela $stateParamsest généralement utilisé, mais je pense que cette valeur est insérée dans l'URL et je ne veux pas que les utilisateurs puissent ajouter ces données à leurs favoris.

J'aimerais faire quelque chose comme ça.

$state.transitionTo('newState', {myObj: {foo: 'bar'}});

function myCtrl($stateParams) {
   console.log($stateParams.myObj); // -> {foo: 'bar'}
};

Existe-t-il un moyen de le faire sans encoder les valeurs dans l'URL?


1
Les mécanismes ui-router préservent les états des URL tout au long de la navigation. Ainsi, si un utilisateur actualise la page, il revient à la page dans laquelle il se trouvait. Si vous ne souhaitez pas utiliser ce comportement, pensez à utiliser d'autres mécanismes (fonctions brutes dans votre contrôleur / directives, etc.), et utilisez des cookies / stockage pour stocker des données temporaires
Neozaru

Utilisez localStorage avec l'url comme clé pour vos données peut-être?
Neil

2
D'où viennent les valeurs? Ui.router a le concept d'une "résolution" pour charger des données sur une portée avant de passer à l'état demandé. De même, il existe des méthodes onEnter et onExit. De plus, vous pouvez utiliser le stockage local.
Josh C.

Comme @JoshC. mentionné, il semble que vous souhaitiez peut-être examiner la résolution des données avant de passer à un état. github.com/angular-ui/ui-router/wiki#resolve
TrazeK

Voir la réponse de stackOverlord pour savoir comment le faire officiellement.
AlikElzin-kilaka

Réponses:


163

Dans la version 0.2.13, vous devriez pouvoir passer des objets dans $ state.go,

$state.go('myState', {myParam: {some: 'thing'}})

$stateProvider.state('myState', {
                url: '/myState/{myParam:json}',
                params: {myParam: null}, ...

puis accédez au paramètre dans votre contrôleur.

$stateParams.myParam //should be {some: 'thing'}

myParam n'apparaîtra pas dans l'URL.

La source:

Voir le commentaire de christopherthielen https://github.com/angular-ui/ui-router/issues/983 , reproduit ici pour plus de commodité:

christopherthielen: Oui, cela devrait fonctionner maintenant dans la version 0.2.13.

.state ('foo', {url: '/ foo /: param1? param2', params: {param3: null} // null est la valeur par défaut});

$ state.go ('toto', {param1: 'bar', param2: 'baz', param3: {id: 35, nom: 'quoi'}});

$ stateParams dans 'foo' est maintenant {param1: 'bar', param2: 'baz', param3: {id: 35, name: 'what'}}

l'url est / foo / bar? param2 = baz.


Fonctionne également avec transitionTo.
AlikElzin-kilaka

13
Je dois faire quelque chose de mal: - / Je suis sur 0.2.13 mais si j'essaie de passer et d'objecter, il sort dans l'état en tant que chaîne[object Object]
ErichBSchulz

15
@ErichBSchulz Bien que cela ne soit pas inclus dans cette réponse, l'astuce pour faire ce travail consiste à inclure le nom du paramètre dans la chaîne URL de l'état et à spécifier le type comme JSON. ex. $stateProvider.state('myState', { url: '/myState/{myParam:json}', params: {myParam: null},...Consultez les notes de version 0.2.13 et les commentaires de code pour cette fonctionnalité.
Syon

1
J'avais un paramètre id dans mon URL et j'ai dû l'ajouter également à l'objet params. { url: '/mystate/{id:[0-9]+}', params: { id: null, myParam: null }, ...
GraehamF

3
Il doit y avoir de la magie noire en jeu - tout mon json montre l'url: ((
Kabachok

25

Il y a deux parties de ce problème

1) en utilisant un paramètre qui ne modifierait pas une URL (en utilisant la propriété params):

$stateProvider
    .state('login', {
        params: [
            'toStateName',
            'toParamsJson'
        ],
        templateUrl: 'partials/login/Login.html'
    })

2) passer un objet en tant que paramètre: Eh bien, il n'y a pas de moyen direct de le faire maintenant, car chaque paramètre est converti en chaîne ( EDIT : depuis 0.2.13, ce n'est plus vrai - vous pouvez utiliser des objets directement), mais vous pouvez contourner le problème en créant vous-même la chaîne

toParamsJson = JSON.stringify(toStateParams);

et dans le contrôleur cible, désérialisez à nouveau l'objet

originalParams = JSON.parse($stateParams.toParamsJson);

1
En fait, pour passer des objets, c'est un bon hack :)
Tek

nous pouvons passer l'objet directement. vérifier la réponse acceptée
Kishore Relangi

20

En fait, vous pouvez le faire.

$state.go("state-name", {param-name: param-value}, {location: false, inherit: false});

Ceci est la documentation officielle sur les options de state.go

Tout y est décrit et comme vous pouvez le voir, c'est la voie à suivre.


J'ai essayé ce code exact et l'objet n'est pas conservé.
Virmundi

1
vous ne pouvez pas passer des objets, vous ne pouvez passer que des valeurs de paramètre uniques .... vous en faites un objet, vous devez mettre toutes les propriétés en tant que paramètres d'URL différents. Les développeurs Angular-ui-router travaillent toujours sur la transmission de tout l'objet. En fait, ce gars Svatopluk Ledl a donné une bonne solution. Faites simplement l'objet comme une chaîne json entière et analysez-le ensuite. :)
Tek

13

Btw, vous pouvez également utiliser l'attribut ui-sref dans vos modèles pour passer des objets

ui-sref="myState({ myParam: myObject })"

1
Comment recevons-nous cet objet en .state
Shubham

@Shubham vous configureriez les 'params' pour l'état qui recevra l'objet, puis en utilisant $ stateParams pour récupérer cet objet. voir le doc angular-ui.github.io/ui-router/site/#/api/… pour plus de détails.
tao

cela fonctionne mais ne peut pas conserver les données après l'actualisation de la page.
tao

9

1)

$stateProvider
        .state('app.example1', {
                url: '/example',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/example.html',
                        controller: 'ExampleCtrl'
                    }
                }
            })
            .state('app.example2', {
                url: '/example2/:object',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/example2.html',
                        controller: 'Example2Ctrl'
                    }
                }
            })

2)

.controller('ExampleCtrl', function ($state, $scope, UserService) {


        $scope.goExample2 = function (obj) {

            $state.go("app.example2", {object: JSON.stringify(obj)});
        }

    })
    .controller('Example2Ctrl', function ($state, $scope, $stateParams) {

        console.log(JSON.parse($state.params.object));


    })

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.