web-dev-qa-db-fra.com

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

J'aimerais pouvoir passer à un état et passer un objet arbitraire à l'aide de ui-router.

Je suis conscient du fait que $stateParams est généralement utilisé, mais je crois que cette valeur est insérée dans l'URL et je ne souhaite pas que les utilisateurs puissent ajouter un signet à ces données.

J'aimerais faire quelque chose comme ça.

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

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

Y a-t-il un moyen de faire cela sans coder les valeurs dans l'URL?

javascriptangularjsangular-ui-router
119
eddiec

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/98 , reproduit ici pour plus de commodité:

christopherthielen: Oui, cela devrait fonctionner maintenant dans 0.2.13.

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

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

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

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

161
stackOverlord

Il y a deux parties à 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 paramètre: Eh bien, il n'y a pas de façon directe 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 la chaîne vous-même.

toParamsJson = JSON.stringify(toStateParams);

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

originalParams = JSON.parse($stateParams.toParamsJson);
25
Svatopluk Ledl

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 dans state.go

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

20
Tek

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

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

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));


    })
9
vrbsm

Non, l'URL sera toujours mise à jour lorsque les paramètres seront passés à transitionTo.

Cela se produit sur state.js: 698 dans i-router .

3
afternoon