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

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'
    }
  }

});
Radim Köhler
Pregunta editada 20º mayo 2015 в 5:07
Programación
javascript html angularjs angular-ui angular-ui-router
3º septiembre 2014 в 2:50
103 vistas
Comentarios sobre la pregunta (4)
Solución

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:

  • [Parámetros de la URL][2]

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

  • valor - {objeto|función=}: especifica el valor por defecto de este parámetro. Esto implícitamente establece este parámetro como opcional...
  • array - {boolean=}: (por defecto: false) Si es true, el valor del parámetro será tratado como un array de valores.
  • squash - {bool|string=}: squash configura cómo se representa el valor del parámetro por defecto en la URL cuando el valor actual del parámetro es el mismo que el valor por defecto.

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

Radim Köhler
Respuesta editada 11º mayo 2015 в 6:56
Comentarios (5)

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)`.

Comentarios (1)

Simplemente escribiste mal "$stateParam", debería ser "$stateParams" (con una s). Por eso te quedas sin definir ;)

Comentarios (1)