Necesito pasar y recibir dos parámetros al estado al que quiero transitar usando "u-sref" de ui-router.
Algo así como usar el enlace de abajo para pasar el estado a "casa" con los parámetros "foo" y "bar":
<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a>
Recibiendo valores "foo" y "bar" en un controlador:
app.controller('SomeController', function($scope, $stateParam) {
//..
var foo = $stateParam.foo; //getting fooVal
var bar = $stateParam.bar; //getting barVal
//..
});
Me quedo "indefinido" por "StateParam" en el controlador.
¿Podría alguien ayudarme a entender cómo hacerlo?
Editar:
.state('home', {
url: '/',
views: {
'': {
templateUrl: 'home.html',
controller: 'MainRootCtrl'
},
'A@home': {
templateUrl: 'a.html',
controller: 'MainCtrl'
},
'B@home': {
templateUrl: 'b.html',
controller: 'SomeController'
}
}
});
He creado un [ejemplo][1] para mostrar cómo hacerlo. La definición actualizada del "estado" sería:
$stateProvider
.state('home', {
url: '/:foo?bar',
views: {
'': {
templateUrl: 'tpl.home.html',
controller: 'MainRootCtrl'
},
...
}
Y este sería el controlador:
.controller('MainRootCtrl', function($scope, $state, $stateParams) {
//..
var foo = $stateParams.foo; //getting fooVal
var bar = $stateParams.bar; //getting barVal
//..
$scope.state = $state.current
$scope.params = $stateParams;
})
Lo que podemos ver es que el hogar estatal ahora tiene la url definida como:
url: '/:foo?bar',
lo que significa, que los parámentros en la url se esperan como
/fooVal?bar=barValue
Estos dos enlaces pasarán correctamente los argumentos al controlador:
<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})">
<a ui-sref="home({foo: 'fooVal2', bar: 'barVal2'})">
Además, el controlador consume $stateParam
en lugar de $stateParam
.
Enlace a doc:
Puedes comprobarlo [aquí][3]
params : {}
También hay nuevos, más granulados de ajuste params : {}
.
Como ya hemos visto, podemos declarar los parámetros como parte de la "curva".
Pero con los `parámetros'': {}
configuración - podemos extender esta definición o incluso introducir parámetros que no son parte de la url:
.state('other', {
url: '/other/:foo?bar',
params: {
// here we define default value for foo
// we also set squash to false, to force injecting
// even the default value into url
foo: {
value: 'defaultValue',
squash: false,
},
// this parameter is now array
// we can pass more items, and expect them as []
bar : {
array : true,
},
// this param is not part of url
// it could be passed with $state.go or ui-sref
hiddenParam: 'YES',
},
...
Los ajustes disponibles para los parámetros se describen en la documentación del [$stateProvider][4]
A continuación se muestra un extracto
Podemos llamar a estos parámetros de esta manera:
// hidden param cannot be passed via url
<a href="#/other/fooVal?bar=1&bar=2">
// default foo is skipped
<a ui-sref="other({bar: [4,5]})">
Compruébelo en acción [aquí][5]
[1]: http://plnkr.co/edit/r2JhV4PcYpKJdBCwHIWS?p=preview [2]: https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters [3]: http://plnkr.co/edit/r2JhV4PcYpKJdBCwHIWS?p=preview [4]: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider [5]: http://plnkr.co/edit/r2JhV4PcYpKJdBCwHIWS?p=preview
No es necesario tener los parámetros dentro de la URL.
Por ejemplo, con:
$stateProvider
.state('home', {
url: '/',
views: {
'': {
templateUrl: 'home.html',
controller: 'MainRootCtrl'
},
},
params: {
foo: null,
bar: null
}
})
Podrás enviar parámetros al estado, usando cualquiera de los dos:
$state.go('home', {foo: true, bar: 1});
// or
<a ui-sref="home({foo: true, bar: 1})">Go!</a>
Por supuesto, si recargas la página una vez en el estado "home", perderás los parámetros del estado, ya que no están almacenados en ninguna parte.
Una descripción completa de este comportamiento está documentada aquí, bajo la fila de "parámetros" en la sección "state(name, stateConfig)`.