¿Cómo enviar y recuperar parámetros usando $ state.go toParams y $ stateParams?

Estoy usando AngularJS v1.2.0-rc.2 con ui-router v0.2.0. Quiero pasar el estado de referencia a otro estado, así que uso el toParamsde $state.goigual manera:

$state.go('toState', {referer: $state.current.name});

De acuerdo con los documentos , esto debería llenar $stateParamsel toStatecontrolador, pero lo es undefined. ¿Qué me estoy perdiendo?

He creado un plunk para demostrar:

http://plnkr.co/edit/ywEcG1

Si desea pasar un estado que no sea URL, no debe usarlo urlal configurar su state. Encontré la respuesta en un RP e hice algunos monos para entender mejor.

$stateProvider.state('toState', {
  templateUrl:'wokka.html',
  controller:'stateController',
  params: {
    'referer': 'some default', 
    'param2': 'some default', 
    'etc': 'some default'
  }
});

Luego puedes navegar hacia ella así:

$state.go('toState', { 'referer':'jimbob', 'param2':37, 'etc':'bluebell' });

O:

var result = { referer:'jimbob', param2:37, etc:'bluebell' };
$state.go('toState', result);

Y en HTML así:

<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

Este caso de uso está completamente descubierto en la documentación, pero creo que es un medio poderoso para la transición del estado sin usar URL.

La solución de Nathan Matthews no funcionó para mí, pero es totalmente correcta, pero no tiene mucho sentido llegar a una solución alternativa:

El punto clave es: Tipo de parámetros definidos y toParamas de $ state.go debe ser la misma matriz u objeto en ambos lados de la transición de estado.

Por ejemplo, cuando define los parámetros en un estado de la siguiente manera, significa que los parámetros son una matriz debido al uso de "[]":

$stateProvider
.state('home', {
    templateUrl: 'home',
    controller:  'homeController'
})
.state('view', {
    templateUrl: 'overview',
    params:      ['index', 'anotherKey'],
    controller:  'overviewController'
})

Por lo tanto, también debe pasar aParams como una matriz como esta:

params = { 'index': 123, 'anotherKey': 'This is a test' }
paramsArr = (val for key, val of params)
$state.go('view', paramsArr)

Y puede acceder a ellos a través de $ stateParams como una matriz como esta:

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams[0];
    var anotherKey = $stateParams[1];
});

Una mejor solución es usar un objeto en lugar de una matriz en ambos lados :

$stateProvider
.state('home', {
    templateUrl: 'home',
    controller:  'homeController'
})
.state('view', {
    templateUrl: 'overview',
    params:      {'index': null, 'anotherKey': null},
    controller:  'overviewController'
})

Reemplacé [] con {} en la definición de parámetros. Para pasar toParams a $ state.go también debe usar object en lugar de array:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })

entonces puede acceder a ellos a través de $ stateParams fácilmente:

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams.index;
    var anotherKey = $stateParams.anotherKey;
});

Todo lo que tenía que hacer era agregar un parámetro a la definición del estado de la URL de esta manera

url: '/toState?referer'

Doh!

No estoy seguro de si funcionará con AngularJS v1.2.0-rc.2 con ui-router v0.2.0. He probado esta solución en AngularJS v1.3.14 con ui-router v0.2.13.

Me doy cuenta de que no es necesario pasar el parámetro en la URL como recomienda gwhn.

Simplemente agregue sus parámetros con un valor predeterminado en su definición de estado. Su estado aún puede tener un valor de URL.

$stateProvider.state('state1', {
    url : '/url',
    templateUrl : "new.html",
    controller : 'TestController',
    params: {new_param: null}
});

y agregue el parámetro a $state.go()

$state.go('state1',{new_param: "Going places!"});

Ninguno de estos ejemplos en esta página funcionó para mí. Esto es lo que usé y funcionó bien. Algunas soluciones dicen que no se puede combinar la URL con $ state.go () pero esto no es cierto. Lo incómodo es que debe definir los parámetros para la url y también enumerar los parámetros. Ambos deben estar presentes. Probado en Angular 1.4.8 y UI Router 0.2.15.

En el estado, agregue sus parámetros al final del estado y defina los parámetros:

url: 'view?index&anotherKey',
params: {'index': null, 'anotherKey': null}

En su controlador, su declaración go se verá así:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' });

Luego, para extraer los parámetros y usarlos en el controlador de su nuevo estado (no olvide pasar $ stateParams a la función de su controlador):

var index = $stateParams.index;
var anotherKey = $stateParams.anotherKey;
console.log(anotherKey); //it works!

En mi caso, probé con todas las opciones dadas aquí, pero nadie funcionaba correctamente (angular 1.3.13, iónico 1.0.0, angular-ui-router 0.2.13). La solución fue:

.state('tab.friends', {
      url: '/friends/:param1/:param2',
      views: {
        'tab-friends': {
          templateUrl: 'templates/tab-friends.html',
          controller: 'FriendsCtrl'
        }
      }
    })

y en el estado.

$state.go('tab.friends', {param1 : val1, param2 : val2});

Salud

He pasado mucho tiempo luchando con los $ state & $ stateParams de Ionic / Angular;

Para utilizar $ state.go () y $ stateParams, debe tener ciertas cosas configuradas y otros parámetros no deben estar presentes.

En mi app.config () he incluido $ stateProvider y he definido varios estados:

$stateProvider
    .state('home', {
        templateUrl: 'home',
        controller:  'homeController'
    })
    .state('view', {
        templateUrl: 'overview',
        params:      ['index', 'anotherKey'],
        controller:  'overviewController'
    })

La paramsclave es especialmente importante. Además, observe que NO hay urlclaves presentes ... utilizando stateParams y las URL NO se mezclan. Son mutuamente excluyentes entre sí.

En la llamada $ state.go (), defínalo como tal:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })

Las variables indexy anotherKey$ stateParams SOLO se completarán si se enumeran por primera vez en la paramsclave de definición $ stateController .

Dentro del controlador, incluya $ stateParams como se ilustra:

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams.index;
    var anotherKey = $stateParams.anotherKey;
});

¡Las variables pasadas deberían estar disponibles!

Probar con reload: true?

No pude entender lo que estaba pasando durante mucho tiempo, resulta que me estaba engañando a mí mismo. Si está seguro de que las cosas están escritas correctamente y usará el mismo estado, intente reload: true:

.state('status.item', {
    url: '/:id',
    views: {...}
}

$state.go('status.item', { id: $scope.id }, { reload: true });

Espero que esto te ahorre tiempo!

Me enfrenté a un problema similar. Terminé con una solución de trabajo después de mucho googlear y probar y probar. Aquí está mi solución que funcionaría para usted.

Tengo dos controladores: searchBoxController y stateResultController y un parámetro llamado searchQuery para pasar de una vista que tiene un cuadro de búsqueda a una vista que muestra los resultados obtenidos de un servidor remoto. Así es como lo haces:

A continuación se muestra el controlador desde el que se llama a la siguiente vista usando $state.go()

.controller('searchBoxController', function ($scope, $state) {
        $scope.doSearch = function(){
            var searchInputRaw = $scope.searchQueryInput;
            $state.go('app.searchResults', { searchQuery: searchInput });
        }
    })

A continuación se muestra el estado al que se llamaría cuando $state.go()se ejecute:

.state('app.searchResults', 
            {
                url: '/searchResults',
                views:
                {
                    'menuContent': { templateUrl: 'templates/searchResult.html', controller: 'stateResultController' }
                },
                params: 
                {
                    'searchQuery': ''
                }
            })

Y finalmente, el controlador asociado con el app.searchResultsestado:

.controller('stateResultController', function ($scope, $state, $stateParams, $http) {
        $scope.searchQueryInput = $stateParams.searchQuery;
    });

Y en mi caso de un estado padre / hijo. todos los parámetros declarados en estado hijo deben ser conocidos por el estado padre

        .state('full', {
            url: '/full',
            templateUrl: 'js/content/templates/FullReadView.html',
            params: { opmlFeed:null, source:null },
            controller: 'FullReadCtrl'
        })
        .state('full.readFeed', {
            url: '/readFeed',
            views: {
                'full': {
                    templateUrl: 'js/content/templates/ReadFeedView.html',
                    params: { opmlFeed:null, source:null },
                    controller: 'ReadFeedCtrl'
                }
            }
        })

La solución para llegar a tener un estado que tomara 2 parámetros estaba cambiando:

.state('somestate', {
  url: '/somestate',
  views: {...}
}

a

.state('somestate', {
  url: '/somestate?id=:&sub=:',
  views: {...}
}

Su siguiente definición en router.js

$stateProvider.state('users', {
    url: '/users',
    controller: 'UsersCtrl',
    params: {
        obj: null
    }
})

Su controlador necesita agregar $ stateParams.

function UserCtrl($stateParams) {
    console.log($stateParams);
}

Puede enviar un objeto por parámetro de la siguiente manera.

$state.go('users', {obj:yourObj});

Intenté navegar de la página 1 a la 2 y tuve que pasar algunos datos también.

En mi router.js , agregué el nombre y la edad de los parámetros :

.state('page2', {
          url: '/vehicle/:source',
          params: {name: null, age: null},
.................

En la Página 1 , onClick del botón a continuación:

$state.go("page2", {name: 'Ron', age: '20'});

En la página 2 , pude acceder a esos parámetros:

$stateParams.name
$stateParams.age

Si este es un parámetro de consulta que desea pasar de esta manera: /toState?referer=current_user

entonces necesitas describir tu estado así:

$stateProvider.state('toState', {
  url:'toState?referer',
  views:{'...'}
});

fuente: https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters