¿Cómo pasar un objeto a un estado usando UI-router?


119

Me gustaría poder hacer la transición a un estado y pasar un objeto arbitrario usando ui-router.

Soy consciente de que $stateParamsse usa normalmente , pero creo que este valor se inserta en la URL y no quiero que los usuarios puedan marcar estos datos.

Me gustaría hacer algo como esto.

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

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

¿Hay alguna forma de hacer esto sin codificar valores en la URL?


1
Los mecanismos de ui-enrutador conservan los estados de URL a lo largo de la navegación. Por lo tanto, si un usuario actualiza la página, vuelve a la página en la que estaba. Si no desea usar este comportamiento, considere usar otros mecanismos (funciones sin procesar en su controlador / directivas, etc.) y use cookies / almacenamiento para almacenar datos temporales
Neozaru

¿Usar localStorage con la URL como clave para sus datos, tal vez?
Neil

2
¿De dónde provienen los valores? Ui.router tiene el concepto de una "resolución" para cargar datos en un alcance antes de pasar al estado solicitado. Del mismo modo, existen métodos onEnter y onSalir. Además, puede utilizar el almacenamiento local.
Josh C.

Como @JoshC. mencionado, parece que es posible que desee analizar la resolución de datos antes de pasar a un estado. github.com/angular-ui/ui-router/wiki#resolve
TrazeK

Vea la respuesta de stackOverlord sobre cómo hacerlo oficialmente.
AlikElzin-kilaka

Respuestas:


163

En la versión 0.2.13, debería poder pasar objetos a $ state.go,

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

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

y luego acceda al parámetro en su controlador.

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

myParam no aparecerá en la URL.

Fuente:

Vea el comentario de christopherthielen https://github.com/angular-ui/ui-router/issues/983 , reproducido aquí para mayor comodidad:

christopherthielen: Sí, esto debería estar funcionando ahora en 0.2.13.

.state ('foo', {url: '/ foo /: param1? param2', params: {param3: null} // null es el valor predeterminado});

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

$ stateParams en 'foo' ahora es {param1: 'bar', param2: 'baz', param3: {id: 35, name: 'what'}}

url es / foo / bar? param2 = baz.


transitionToTambién funciona con .
AlikElzin-kilaka

13
Debo estar haciendo algo mal: - / Estoy en 0.2.13 pero si intento pasar y objetar, sale en el estado como la cadena[object Object]
ErichBSchulz

15
@ErichBSchulz Aunque no está incluido en esta respuesta, el truco para que esto funcione es incluir el nombre del parámetro en la cadena de URL del estado y especificar el tipo como JSON. ex. $stateProvider.state('myState', { url: '/myState/{myParam:json}', params: {myParam: null},...Consulte las notas de la versión 0.2.13 y los comentarios del código para esta función.
Syon

1
Tenía un parámetro de identificación en mi URL y también tuve que agregarlo al objeto params. { url: '/mystate/{id:[0-9]+}', params: { id: null, myParam: null }, ...
GraehamF

3
Debe haber algo de magia negra en juego: todo mi json muestra la URL: (((
Kabachok

25

Hay dos partes de este problema

1) usando un parámetro que no alteraría una URL (usando la propiedad params):

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

2) pasar un objeto como parámetro: Bueno, no hay una forma directa de cómo hacerlo ahora, ya que cada parámetro se convierte en una cadena ( EDITAR : desde 0.2.13, esto ya no es cierto, puede usar objetos directamente), pero puede solucionarlo creando la cadena por su cuenta

toParamsJson = JSON.stringify(toStateParams);

y en el controlador de destino deserializar el objeto nuevamente

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

1
En realidad, para pasar objetos, este es un truco bastante agradable :)
Tek

podemos pasar el objeto directamente. verifique la respuesta aceptada
Kishore Relangi

20

De hecho, puedes hacer esto.

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

Esta es la documentación oficial sobre opciones en state.go

Allí se describe todo y, como puede ver, esta es la forma de hacerlo.


Probé este código exacto y el objeto no se conserva.
Virmundi

1
no puede pasar objetos, solo puede pasar valores de un solo parámetro ... si lo hace como un objeto, debe poner todas las propiedades como diferentes parámetros de URL. Los desarrolladores de enrutador de interfaz de usuario angular todavía están trabajando para pasar el objeto completo. En realidad, los chicos Svatopluk Ledl dieron una buena solución. Simplemente haga el objeto como una cadena json completa y luego analícelo. :)
Tek

13

Por cierto, también puede usar el atributo ui-sref en sus plantillas para pasar objetos

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

1
¿Cómo recibimos este objeto en .state
Shubham

@Shubham configuraría los 'parámetros' para el estado que recibirá el objeto, luego usaría $ stateParams para recuperar ese objeto. consulte el documento angular-ui.github.io/ui-router/site/#/api/… para obtener más detalles.
tao

esto funciona pero no puede mantener los datos después de actualizar la página.
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));


    })

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.