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 })"