Cómo pasar parámetros usando ui-sref en ui-router al controlador
Necesito pasar y recibir dos parámetros para el estado al que quiero pasar usando ui-srefui-router.
Algo así como usar el siguiente enlace para realizar la transición del estado a homewith fooy barparámetros:
<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a>
Recepción fooy barvalores en un controlador:
app.controller('SomeController', function($scope, $stateParam) {
//..
var foo = $stateParam.foo; //getting fooVal
var bar = $stateParam.bar; //getting barVal
//..
});
Me meto undefineden $stateParamel controlador.
¿Alguien podría 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 para mostrar cómo hacerlo. La definición actualizada stateserí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 la página de inicio del estado ahora tiene la URL definida como:
url: '/:foo?bar',
lo que significa que se esperan los parámetros en la URL como
/fooVal?bar=barValue
Estos dos enlaces pasarán argumentos correctamente al controlador:
<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})">
<a ui-sref="home({foo: 'fooVal2', bar: 'barVal2'})">
Además, el controlador consume $stateParamsen lugar de $stateParam.
Enlace al documento:
- Parámetros de URL
Puede comprobar aquí
params : {}
También hay una configuración nueva y más granular params : {}. Como ya hemos visto, podemos declarar parámetros como parte de url. Pero con params : {}la configuración, podemos ampliar esta definición o incluso introducir parámetros que no forman 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',
},
...
Las configuraciones disponibles para los parámetros se describen en la documentación de $stateProvider.
A continuación se muestra solo un extracto.
- valor - {objeto|función=} : especifica el valor predeterminado para este parámetro. Esto establece implícitamente este parámetro como opcional...
- matriz - {boolean=}: (predeterminado: falso) Si es verdadero, el valor del parámetro se tratará como una matriz de valores.
- squash - {bool|string=}: squash configura cómo se representa un valor de parámetro predeterminado en la URL cuando el valor del parámetro actual es el mismo que el valor predeterminado.
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ébalo en acción aquí
No es necesario que tengas 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:
$state.go('home', {foo: true, bar: 1});
// or
<a ui-sref="home({foo: true, bar: 1})">Go!</a>
Por supuesto, si recarga la página una vez en el homeestado, perderá los parámetros del estado, ya que no están almacenados en ningún lugar.
Aquí se documenta una descripción completa de este comportamiento , debajo de la paramsfila de la state(name, stateConfig)sección.
Simplemente escribiste mal $stateParam, debería ser $stateParams(con una s). Es por eso que no estás definido;)
