javascript - stateparams - AngularJS: pasa un objeto a un estado usando ui-router

ui router nested views

Question

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

Soy consciente de que usualmente se usa $ stateParams, 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 manera de hacerlo sin codificar valores en la URL?

Answer 1

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


    })

Answer 2

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 se mostrará 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, nombre: ''qué''}});

$ stateParams en ''foo'' ahora es {param1: ''bar'', param2: ''baz'', param3: {id: 35, nombre: ''qué''}}

url es / foo / bar? param2 = baz.

Answer 3

En realidad puedes hacer esto.

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

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

Aquí se describe todo y, como pueden ver, esta es la manera de hacerlo.

Answer 4

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 cadena ( EDITAR : desde 0.2.13, esto ya no es cierto - puedes usar objetos directamente), pero puede solucionarlo creando la cadena por su cuenta

toParamsJson = JSON.stringify(toStateParams);

y en el controlador objetivo deserializar el objeto de nuevo

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

Answer 5

No, la URL siempre se actualizará cuando se pasen los parámetros a transitionTo .

Esto sucede en state.js:698 en ui-router .

Answer 6

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

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