Cómo pasar parámetros usando ui-sref en ui-router al controlador

4 minutos de lectura

avatar de usuario
saltar

Necesito pasar y recibir dos parámetros al estado al que quiero transitar usando ui-sref de ui-enrutador.

Algo así como usar el enlace a continuación para hacer la transición del estado a home con foo y bar parámetros:

<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a>

Recepción foo y bar valores en un controlador:

app.controller('SomeController', function($scope, $stateParam) {
  //..
  var foo = $stateParam.foo; //getting fooVal
  var bar = $stateParam.bar; //getting barVal
  //..
});     

yo obtengo undefined por $stateParam en el controlador.

¿Alguien podría ayudarme a entender cómo hacerlo?

Editar:

.state('home', {
  url: "https://stackoverflow.com/",
  views: {
    '': {
      templateUrl: 'home.html',
      controller: 'MainRootCtrl'

    },

    '[email protected]': {
      templateUrl: 'a.html',
      controller: 'MainCtrl'
    },

    '[email protected]': {
      templateUrl: 'b.html',
      controller: 'SomeController'
    }
  }

});

  • También debe tenerlos configurados en sus rutas. ex:- url:'.../home/:foo/:bar

    – PSL

    3 sep 2014 a las 14:51


  • @PSL: ¿Podría dar un pequeño ejemplo aquí? Gracias.

    – saltar

    03/09/2014 a las 14:55

  • @PSL: gracias PSL, ¿hay alguna otra forma en que pueda tener esos parámetros con sus valores en un controlador?

    – saltar

    03/09/2014 a las 15:01

  • Hacer '/:foo/:bar': { en su ruta en blanco o también puede configurar como cadena de consulta.

    – PSL

    03/09/2014 a las 15:01


avatar de usuario
Radim Köhler

he creado un ejemplo para mostrar cómo. Actualizado state definición 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 la casa del estado ahora tiene una URL definida como:

url: '/:foo?bar',

lo que significa que los parámetros en 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 $stateParams en vez de $stateParam.

Enlace al documento:

Usted puede comprobarlo aquí

params : {}

También hay nuevoconfiguración más granular params : {}. Como ya hemos visto, podemos declarar parámetros como parte de url. Pero con params : {} 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',
      },
    ...

Los ajustes disponibles para los parámetros se describen en la documentación del $estadoProveedor

A continuación se muestra sólo un extracto

  • valor – {objeto|función=}: especifica el valor predeterminado para este parámetro. Esto establece implícitamente este parámetro como opcional…
  • matriz – {booleano=}: (predeterminado: falso) Si es verdadero, el valor del parámetro se tratará como una matriz de valores.
  • calabaza – {bool|cadena=}: 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&amp;bar=2">
// default foo is skipped
<a ui-sref="other({bar: [4,5]})">

Compruébalo en acción aquí

No necesariamente necesita tener los parámetros dentro de la URL.

Por ejemplo, con:

$stateProvider
.state('home', {
  url: "https://stackoverflow.com/",
  views: {
    '': {
      templateUrl: 'home.html',
      controller: 'MainRootCtrl'

    },
  },
  params: {
    foo: null,
    bar: null
  }
})

Podrá enviar parámetros al estado, usando cualquiera de los siguientes:

$state.go('home', {foo: true, bar: 1});
// or
<a ui-sref="home({foo: true, bar: 1})">Go!</a>

Por supuesto, si vuelve a cargar la página una vez en el home state, perderá los parámetros de estado, ya que no se almacenan en ninguna parte.

Se documenta una descripción completa de este comportamiento. aquíbajo la params fila en el state(name, stateConfig) sección.

simplemente escribiste mal $stateParamdebería ser $stateParams (con una s). Por eso te quedas indefinido 😉

  • En general, esto debería ir como un comentario en la pregunta. Pero de todos modos, +1 por los esfuerzos realizados para leer la pregunta y comprender el problema 🙂

    –Anmol Saraf

    07/01/2016 a las 16:32

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad